Javascript VueJS-v-for内部的组件

我正在尝试渲染Vue实例中的对象列表。每个对象都应该使用一个组件，因此我将该组件放入v-for-loop中。但是我得到的只是

list.title

和

list.text

而不是正确的值

在v-for-loop中使用组件是否有特殊的方法

我发现了这个，但不知道如何使用它，也不知道它是否正确

应用程序：

Vue实例：

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

---

谢谢

您应该使用参数前面的

：

作为动态道具传递：

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

从文件：

初学者经常犯的一个错误是试图使用文字语法传递数字：

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

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

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

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

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

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