suchen

Heim  >  Fragen und Antworten  >  Hauptteil

So schleifen Sie Artikel im Vuex-Store

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粉513318114P粉513318114513 Tage vor662

Antworte allen(1)Ich werde antworten

  • P粉536909186

    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>

    Antwort
    0
  • StornierenAntwort