title: How can I dynamically render an array passed as a prop in vue.js?
body: <p>I am trying to pass this data to a component in vue. I can get the data in the child component, and can render the array, or access each object properties by calling <code>products[0].name</code>, but I am looking to render each object separately in a <code>v-for</code> loop. please help!!</p>
  <p>parent component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h1&gt;Welcome To Our Shop&lt;/h1&gt;
      &lt;div class="products"&gt;
        &lt;div v-for="product in products" v-bind:key="product.name"&gt;
          &lt;div&gt;&lt;ShopItem v-bind:products="products" /&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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"),
          },
        ],
      };
    },
  };
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>child component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div class="product-container"&gt;
      &lt;div&gt;
        &lt;h2&gt;{{ products[0].name }}&lt;/h2&gt; //this is where I want to call on the name
        &lt;div class="card-container"&gt;
          &lt;img src="../../assets/Draeorc.png" alt="cards" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: "ShopItem",
    props: ["products"],
  };
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>