title: Vue.js is not setting attributes declared in data object array
body: <p>I'm new to vue.js and I want to create some product cards that will dynamically set its attributes through vue.js:</p>
  
  <p>I have this is my HTML snippet:</p>
  
  <pre><code>&lt;div id="app"&gt;
  &lt;card v-for= "products in product" :productname="product.productname"&gt;&lt;/card&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my vue.js template/componet code:</p>
  
  <pre><code>Vue.component('card', {
      props: [`productname`, `oldPrice`, `productPrice`, `productdetails`, `imgsrc`],
  
      template: `
      &lt;div class="card"&gt;
      &lt;div class="card-img-top"&gt;
         &lt;img :src="imgsrc"&gt;
      &lt;/div&gt;
      &lt;div class="card-body"&gt;
          &lt;h2&gt;{{productname}}&lt;/h2&gt;
          &lt;p&gt;{{productdetails}}.&lt;/p&gt;
          &lt;h6 class="product-price"&gt;&lt;span class="old-price"&gt;{{oldPrice}} &lt;/span&gt;{{productPrice}}&lt;/h6&gt;
          &lt;div class="rating"&gt;
              &lt;span class="fa fa-star"&gt;&lt;/span&gt;
              &lt;span class="fa fa-star"&gt;&lt;/span&gt;
              &lt;span class="fa fa-star"&gt;&lt;/span&gt;
              &lt;span class="fa fa-star"&gt;&lt;/span&gt;
              &lt;span class="fa fa-star-half"&gt;&lt;/span&gt;
              &lt;span class="fa fa-star-o"&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
      &lt;/div&gt;`
  })
  </code></pre>
  
  <p>And this is my vue instance:</p>
  
  <pre><code>new Vue({
  el: " #app",
  
  data: {
      product: [{
              imgsrc: 'img/41IP6IopkBL.jpg',
              productname: "Pinar Wine top",
              productdetails: 'Lorem ipsum dolor sit amet, consectetur ',
              productPrice: '$200',
              oldPrice: '$400'
          }, {
              imgsrc: 'img/41IP6IopkBL.jpg',
              productname: 'Pinar Wine top',
              productdetails: 'Lorem ipsum dolor sit amet, consectetur',
              productprice: '$200',
              oldprice: '$400'
  
          }]
  </code></pre>
  
  <p>But it's just displaying the cards, the attributes (e.g. product name, price etc.) are not displaying. What am I doing wrong?</p>