Heim > Fragen und Antworten > Hauptteil
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?
P粉5369091862023-09-12 13:12:45
allProducts
是具有属性 products
的对象,因此为了循环产品,请尝试 product in allProducts.products
const 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>