我如何动态渲染一个数组作为 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

改变

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>

Answer 2

这里

  <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 and show each item inside the products array. When you go through the array, an item which is right for that iteration will be passed to ShopItem component and no need to access index by using
products[index]

所以最好还是做以下事情

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

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

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

How can I dynamically render an array passed as a prop in vue.js?

vue.js

vue-component

vuejs2

vue-props