vue.js - 如何动态渲染作为vue.js中的prop传递的数组？

Question

我正在尝试将此数据传递给Vue中的组件。我可以在子组件中获取数据，并且可以渲染数组，或者通过调用products[0].name来访问每个对象的属性，但是我希望在v-for循环中分别渲染每个对象。请帮忙!!
父组件:

<template>
  <div>
    <h1>Welcome To Our Shop</h1>
    <div class="products">
      <div v-for="product in products" v-bind:key="product.name">
        <div><ShopItem v-bind:products="products" /></div>
      </div>
    </div>
  </div>
</template>

<script>
import ShopItem from "../components/Shop/ShopItem";
export default {
  name: "Shop",
  components: { ShopItem },
  data() {
    return {
      products: [
        {
          name: "Basic Deck",
          price: 7,
          description:
            "The Basic Deck includes 68 cards: 10 cards in each of six categories, three icon legend cards, five blank cards for developing your own backstory elements, and instructions.",
          image: require("@/assets/Draeorc.png"),
        },
        {
          name: "Card Bundle",
          price: 10,
          description:
            "The Card Bundle includes the Basic Deck, Technical Booster, Mystical Booster and instructions as a single self-printable PDF.",
          image: require("@/assets/Twilight.png"),
        },
        {
          name: "Full Bundle with Box",
          price: 12,
          description:
            "The Full Bundle includes the Basic Deck, Technical Booster, Mystical Booster, instructions and tuck box as a single self-printable PDF.",
          image: require("@/assets/Orig_Godbringer.png"),
        },
      ],
    };
  },
};
</script>

子组件:

<template>
  <div class="product-container">
    <div>
      <h2>{{ products[0].name }}</h2> //this is where I want to call on the name
      <div class="card-container">
        <img src="../../assets/Draeorc.png" alt="cards" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ShopItem",
  props: ["products"],
};
</script>

Answer 1

这里

  <div v-for="product in products" v-bind:key="product.name">
    <div><ShopItem v-bind:products="products" /></div>
  </div>

您的代码为什么没有意义？

because you want to go through the array which is here products andshow each item inside the products array. When you go through thearray, an item which is right for that iteration will be passed toShopItem component and no need to access index by using
products[index]

因此最好执行以下操作

<div><ShopItem v-bind:product="product" /></div>

因此，当您的 ShopItem组件经历 v-for循环时，就可以访问该产品