VueJS - Component inside of v-for
<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>