2 回答

TA貢獻(xiàn)1856條經(jīng)驗 獲得超5個贊
json直接分配給this.productslike :
fetch('https://fakestoreapi.com/products')
.then(response => response.json())
.then(json => {
this.products = json
})
因為json代表products列表,所以json.products會返回undefined
計算屬性應(yīng)定義如下:
computed:{
comp1(){...},
comp2(){...}
}
<div id="app">
<h2>Total inventory: {{ totalProducts }}</h2>
<ul>
<li>beginning of the list</li>
<li v-for="product in products">
{{ product.title }} {{ product.price }}
</li>
<li>End of the list</li>
</ul>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = new Vue({
el: '#app',
data: {
products: []
},
created() {
fetch('https://fakestoreapi.com/products')
.then(response => response.json())
.then(prod => {
this.products = prod
})
},
computed: {
totalProducts() {
return this.products.reduce((sum, product) => {
return sum + product.price
}, 0)
}
}
})
</script>

TA貢獻(xiàn)1852條經(jīng)驗 獲得超7個贊
您的數(shù)據(jù)應(yīng)該返回一個返回新對象的函數(shù):
短途
data: () => ({
products: []
})
很長的路要走
data() {
return {
products: []
}
}
添加回答
舉報