当使用axios获取数据时,如何在filteredProducts中显示道具。我已经通过了如下所示的道具。
export default {
data() {
return {
filteredProducts: [],
};
},
mounted() {
axios
.get('/src/stores/sneakers.json')
.then(response => { const products = response.data
this.filteredProducts = products.filter(product => product.name.includes('Nike'))
})
},
computed: {
resultCount () {
return Object.keys(this.filteredProducts).length
},
},
props: {
brand: {
type: Object,
},
},
我想用正在传递的品牌名称替换“耐克”。非常感谢
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
选择名为“Nike”的产品并将其传递到
filteredProducts中。之后,您可以使用计算属性更改名称并在模板中使用它。<template> <div v-for="(item, i) in nikeProducts" :key="i" > </div> </template> <script> export default { props: { brand: { type: Object } } data() { return { filteredProducts: [], }; }, mounted() { axios .get('/src/stores/sneakers.json') .then(response => { const products = response.data this.filteredProducts = products.filter(product => product.name.include('Nike')); }) }, computed: { nikeProducts() { return this.filteredProducts.map(product => product.name = this.brand.name) } } } </script>export default { data() { return { products: [], }; }, mounted() { this.getSneakers(); }, methods: { getSneakers() { axios .get('/src/stores/sneakers.json') .then(response => { this.products = response.data ?? []; }) } }, computed: { resultCount () { return this.filteredProducts?.length ?? 0 }, brandName() { return this.brand?.name ?? ""; }, filteredProducts () { return this.products?.filter( product => product.name?.toLowerCase()?.includes(this.brandName.toLowerCase()) ) }, }, props: { brand: { type: Object, }, }, }