title: VueJS - Component inside of v-for
body: <p>I am trying to render a list of objects from my Vue-Instance. Each object should use a component, so I put the component into the v-for-loop. But all I get is <code>list.title</code> and <code>list.text</code> instead of the correct values.</p>
  
  <p>Is there a special way to use components in v-for-loops?</p>
  
  <p>I found this <a href="http://forum.vuejs.org/topic/170/v-for-a-component/2" rel="noreferrer">thread in the Vue-Forum</a>, but don't know how to use it or if it's the right way.</p>
  
  <p>App:</p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;div v-for="list in lists"&gt;
          &lt;listcard title="list.title" text="list.text"&gt;&lt;/listcard&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>&lt;template id="listcard-template"&gt;
      &lt;div class="card"&gt;
          &lt;h2&gt;{{ title }}&lt;/h2&gt;
          &lt;p&gt;{{ text }}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>My component:</p>
  
  <pre><code>Vue.component('listcard', {
      template: '#listcard-template',
      props: ['title', 'text']
  })
  </code></pre>
  
  <p>Vue-Instance:</p>
  
  <pre><code>new Vue({
      el: "#app",
      data: {
          lists: [
              {title: "title1", text: "text1"},
              {title: "title2", text: "text2"},
              ...
          ]
      }
  })
  </code></pre>
  
  <p>Thanks!</p>