VueJS - v-for内部的组件

Question

我试图从我的Vue-Instance渲染对象列表.每个对象都应该使用一个组件,因此我将组件放入v-for-loop中.但我得到的只是list.title而list.text不是正确的值.

是否有一种在v-for-loops中使用组件的特殊方法？

我在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