VueJS - Komponente innerhalb von v-für

Question

Ich versuche, eine Liste von Objekten aus meiner Vue-Instanz zu rendern. Jedes Objekt sollte eine Komponente verwenden, also lege ich die Komponente in die v-for-Schleife. Aber alles, was ich bekomme, ist list.title und list.text anstelle der korrekten Werte.

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

Ich fand diese , aber weiß nicht, wie man es benutzt oder wenn 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"}, 
      ... 
     ] 
    } 
}) 

Danke!

Answer 1

sollten Sie passieren dann als dynamische Stütze : vor Parametern:

<listcard :title=list.title :text=list.text></listcard> 

Aus Dokumentation:

Ein häufiger Fehler Anfänger eine Nummer zu überliefern machen neigen versucht, die Verwendung von Literalsyntax:

<!-- this passes down a plain string "1" --> 
<comp some-prop="1"></comp> 

Da dies jedoch eine Literalstütze ist, wird ihr Wert als einfache Zeichenfolge "1" anstelle einer tatsächlichen Zahl übergeben. Wenn wir eine tatsächliche JavaScript Nummer weitergeben wollen, müssen wir die dynamische Syntax verwenden, um seinen Wert als JavaScript-Ausdruck ausgewertet werden zu machen:

<!-- this passes down an actual number --> 
<comp :some-prop="1"></comp> 

https://vuejs.org/guide/components.html#Literal-vs-Dynamic