英文:
Actual components are not displayed after filtering catalog in Vue 3
问题
The problem you're facing seems to be related to your Vue.js code. Specifically, after filtering, only the number of filtered products is displayed correctly, but the components do not change their content.
可能的问题是您的Vue.js代码。具体来说，在过滤后，只有正确显示了经过过滤的产品数量，但组件的内容没有改变。
If you could provide more details or specific issues you're encountering, I'd be happy to help you identify and troubleshoot the problem.
如果您能提供更多详细信息或您遇到的具体问题，我将很乐意帮助您识别和解决问题。
英文:
There is an array catalog which is displayed onto the page. After filtering, only the number of filtered products is displayed correctly, but the components do not change their content
Video showing the problem: video
<h2 class="typical-title">Catalog</h2>
<section v-if="!isLoading" class="typical-section">
<div v-if="sorting_items.size > 0" class="catalog-sorting">
<a v-for="(item, key) in sorting_items" :key="key" @click.prevent="sortingSwith(item)" href=""
class="catalog-sorting-link">{{ item }}</a>
</div>
<div v-if="catalog.length > 0" class="catalog-content">
<div class="catalog-content-item">
<CatalogItem v-for="item in catalog" :content=item />
</div>
</div>
<div v-else>
<p class="catalog-empty-title">Catalog is empty</p>
<a href="/#contacts" class="catalog-empty-link">Contact us</a>
</div>
</section>
<section class="typical-section" v-else>
<div class="loader">Loading</div>
</section>
I have this code now
export default {
components: {
CatalogItem
},
data() {
return {
isLoading: true,
catalog_raw: [],
choosen_type: null,
sorting_items: new Set([]),
isEnd: false,
}
},
mounted() {
this.fetchCatalog()
},
methods: {
fetchCatalog() {
axios.get(`${API_URL}/catalog`).then(result => {
if (result.data.status === 200) {
this.catalog_raw = result.data.content
for (let i = 0; i < this.catalog_raw.length; i++) {
this.sorting_items.add(this.catalog_raw[i].product_type)
}
} else {
console.error(result.data.title)
}
this.isLoading = false
}).catch(error => {
console.error(error)
this.isLoading = false
})
},
sortingSwith(type) {
this.choosen_type = type
},
},
computed: {
catalog() {
return this.catalog_raw.filter(item => {
if (this.choosen_type === null) {
return item
} else {
if (item.product_type === this.choosen_type) {
return item
}
}
})
}
}
}
What could be the problem? Thanks in advance for your reply
答案1
得分: 0
你应该在使用 v-for 时真的需要一个 key，尤其是在列表中，其中项目的顺序可能会改变。一个唯一的键有助于Vue理解如何正确地对比变化的组件列表。尝试使用以下方式：
<CatalogItem v-for="item in catalog" :key="item.product_id" :content="item" />
英文:
You should really have a key when using v-for, especially for lists where the order of items can change. A unique key helps Vue understand how to properly diff a changing list of components. Try using the following:
<CatalogItem v-for="item in catalog" :key="item.product_id" :content="item" />
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论