await user.comparePassword(password)?
methods: {
onToggled(id) {
if (productData[id]) {
// если данные уже есть, т.к. запрашивались ранее - просто устанавливаем активный id
this.activeId = id
} else {
/*
а иначе делаем запрос, кладём ответ в productData[id], устанавливаете activeId
(или можете устанавливать activeId всегда сразу - тогда после клика по пункту меню
и до получения ответа не будут отображаться никакие данные, можно даже
показывать индикатор загрузки)
*/
}
}
}<categories
:nodes="items"
:active-id="activeId"
@toggled="onToggled"
></categories>
<products
v-if="productData[activeId]"
:items="productData[activeId]"
>
</products>data() {
return {
activeId: null,
productData: null
}
},
watch: {
activeId(val) {
/*
здесь делаете запрос данных по новой категории,
при получении ответа кидаете его в productData
*/
}
}<products
v-if="productData"
:items="productData"
>
</products>
И не написали. Что должен считать ваш счётчик? - это понять затруднительно, есть разные варианты.