Question

我正在尝试从我的Vue-Instance渲染对象列表。每个对象都应该使用一个组件，因此我将组件放入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

VueJS - v-for内部的组件

1 个答案: