title: Put the loop variable into an attribute of a template
body: <p>I've been trying to get this loop to work, but I keep getting the error</p>
  
  <blockquote>
    <p>card is undefined</p>
  </blockquote>
  
  <p>How can I put the <code>img</code> property of the card object into the template?</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>function Board() {
    this.cards = [new Card()];
  }
  
  function Card() {
    this.img = 'img.png';
  }
  
  Vue.component('card', {
    props: ['card'],
    template: '&lt;img v-bind:src="card.img"&gt;'
  });
  
  let app = new Vue({
    el: '#app',
    data: {
      board: new Board()
    },
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
    &lt;card v-for="card in board.cards" v-bind:key="card.img"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>