VueJS - v-for内的组件

Question

我想呈现一个来自我的Vue实例的对象列表。每个对象应该使用一个组件，所以我把组件放入v-for-loop。但我得到的是list.title和list.text而不是正确的值。

在v-for-loops中使用组件有特殊的方法吗？

我发现这个thread in the Vue-Forum，但不知道如何使用它或如果它是正确的方式。

应用：

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

模板：

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

我的组件：

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

Vue公司-实例：

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

谢谢！

Answer 1

你应该在参数前使用:然后通过动态道具：

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

从技术文档：

一个常见的错误初学者往往使正试图通过降低使用了一些语法：

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

但是，由于这是一个文字道具，其值作为普通字符串“1”传递，而不是实际的数字。如果我们要传承一个实际的JavaScript数量，我们需要使用动态语法，以作为一个JavaScript表达式的值进行估算：

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

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