У меня есть Product
компонент и его вложенный компонент, называемый Filter
.
В Product
компоненте I перечислены все продукты.
// Product Component
// Scripts
computed: {
products() {
return this.$store.getters.getServerData.products;
},
...mapGetters({
serverData: 'getServerData'
})
},
//Template
<div v-for="product in products" :key="product.id" class="w-full md:w-1/3 px-3">
<product-item :product="product"></product-item>
</div>
<attribute-filter :attributes="serverData.attributes"></attribute-filter> // Filter
Когда я фильтрую продукты, я помещаю фильтрованные продукты в новый массив и обязуюсь установить этот массив в состояние.
// Filter Component
<script>
import {mapGetters} from 'vuex';
export default {
props: ['option', 'attribute'],
computed: {
products() {
return this.$store.getters.getServerData.products;
},
...mapGetters({
filters: 'attribute/getFilters',
serverData: 'getServerData'
})
},
methods: {
toggleFilter(option) {
option.attributeCode = this.attribute.code;
this.$store.dispatch('attribute/toggleFilter', option);
let filteredProducts = this.products.filter((product) => {
// Logic code to filter product
....
});
let data = this.serverData;
data['products'] = filteredProducts;
this.$store.commit('setData', data);
}
}
}
</script>
После того, как я установил новые данные массива в состояние, вычисленные компоненты products
и serverData
в Product
не реагируют. Я попытался распечатать, то, что я получил, это undefined
.
И я получил эту ошибку:
[Vue warn]: Error in render: "TypeError: Cannot read property 'attributes' of undefined"
found in
---> <ProductPage> at resources/js/components/Product/ProductPage.vue
<App> at resources/js/components/App.vue