如何动态渲染在 vue.js 中作为道具传递的数组？

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>

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

因为你想通过这里是产品的数组和 显示 products 数组中的每个项目。当你通过 数组，一个适合该迭代的项目将被传递给 ShopItem 组件，无需使用索引访问
products[index]

所以最好做到以下几点

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

因此，您的ShopItem 组件在通过v-for 循环时将有权访问产品

Answer 2

改变

v-bind:products="products"

到

v-bind:products="product"

因为你使用的是 for-of 循​​环

在子组件上，更改：

products[0].name

到

products.name

由于属性是一个对象，而不是数组，最好将属性名称更改为product 而不是products

所以你会在父组件上有这个：

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

这在子组件上：

<template>
  <div class="product-container">
    <div>
      <h2>{{ product.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: ["product"],
};
</script>