Ich versuche, eine Liste von Objekten aus meiner Vue-Instanz zu rendern. Jedes Objekt sollte eine Komponente verwenden, also habe ich die Komponente in die v-for-Schleife eingefügt. Aber alles was ich bekomme istlist.title undlist.text anstelle der korrekten Werte.

Gibt es eine spezielle Möglichkeit, Komponenten in V-for-Loops zu verwenden?

Ich habe das gefundenthread im Vue-Forum, aber ich weiß nicht, wie ich es verwenden soll oder ob es der richtige Weg ist.

App:

<div id="app">
    <div v-for="list in lists">
        <listcard title="list.title" text="list.text"></listcard>
    </div>
</div>

Vorlage

<template id="listcard-template">
    <div class="card">
        <h2>{{ title }}</h2>
        <p>{{ text }}</p>
    </div>
</template>

Meine Komponente:

Vue.component('listcard', {
    template: '#listcard-template',
    props: ['title', 'text']
})

Vue-Instanz:

new Vue({
    el: "#app",
    data: {
        lists: [
            {title: "title1", text: "text1"},
            {title: "title2", text: "text2"},
            ...
        ]
    }
})

Vielen Dank