如何循環 Vuex 商店中的項目
P粉513318114
P粉513318114 2023-09-11 23:38:31
0
1
640

這是我在 Vue 開發工具中的商店:

這是我的 Vue 元件:

<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>

如果我使用這個:

{{allProducts}}

我得到了所有產品。

但是當嘗試用這個迴圈時:

<div
        v-for="product in allProducts"
        :key="product._id"
      >
        {{ product.brand }}
      </div>

不顯示。

請問我該怎麼辦?

P粉513318114
P粉513318114

全部回覆(1)
P粉536909186

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>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板