Dies ist mein Shop in Vue Dev Tools:
Das ist meine Vue-Komponente:
<template>
<div>
<div
v-for="product in allProducts"
:key="product._id"
>
{{ product.brand }}
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
data() {
return{
allProducts:[],
}
},
computed: {
...mapGetters(["allProducts"])
},
mounted() {
this.$store.dispatch("getProducts");
}
};
</script>
Wenn ich das verwende:
{{allProducts}}
Ich habe alle Produkte bekommen.
Aber wenn Sie versuchen, diese Schleife zu verwenden:
<div
v-for="product in allProducts"
:key="product._id"
>
{{ product.brand }}
</div>
Nicht angezeigt.
Was soll ich tun?
allProducts是具有属性products的对象，因此为了循环产品，请尝试product in allProducts.productsconst app = Vue.createApp({ data() { return { allProducts: { products: [ {brand: 'aaa'}, {brand: 'bbb'} ] } }; }, }) app.mount('#demo')<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <div v-for="product in allProducts.products"> {{ product.brand }} </div> </div>