Как я могу динамически визуализировать массив, переданный как опора в vue. js? - PullRequest
Новая
       86

Как я могу динамически визуализировать массив, переданный как опора в vue. js?

2 голосов
/ 10 июля 2020

Я пытаюсь передать эти данные компоненту в vue. Я могу получить данные в дочернем компоненте и отрендерить массив или получить доступ к свойствам каждого объекта, вызвав products[0].name, но я хочу визуализировать каждый объект отдельно в v-for l oop. пожалуйста, помогите !!

родительский компонент: 

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

Ответы [ 2 ]

2 голосов
/ 10 июля 2020

Здесь 

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

ваш код не имеет смысла, почему?

потому что вы хотите go через массив товаров и показать каждый элемент внутри массив продуктов. Когда вы go через массив, элемент, который подходит для этой итерации, будет передан компоненту ShopItem, и нет необходимости обращаться к индексу с помощью products[index]

, поэтому лучше сделать следующее 

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

Следовательно, ваш ShopItem компонент будет иметь доступ к продукту по одному в то время, когда он проходит v-for l oop

1 голос
/ 10 июля 2020

Измените 

v-bind:products="products"

на 

v-bind:products="product"

, поскольку вы используете for-of oop

и в дочернем компоненте, измените: 

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