我正在try 渲染Vue实例中的对象列表.每个对象都应该使用一个组件,所以我将该组件放入v-for-loop.但我得到的是list.titlelist.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"},
            ...
        ]
    }
})

谢谢

推荐答案

然后,你应该在参数前面使用:作为动态props 通过:

<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

Vue.js相关问答推荐

虚拟DOM在Vue中姗姗来迟

Vue3组合-如何在组件卸载时注销回调

Vue 3:插槽属性 - 可以通过 props 传递数据吗?

如何 for each 动态创建的按钮/文本字段设置唯一变量?

如何使用 async/await 在 vue js 中添加标头

我是否必须在 Vue 3 中使用 Composition API,还是仍然可以使用Vue 2的方式工作?

aspnet core如何在deploy上构建webpack

如何使用 Vue 命名插槽呈现静态内容列表?

在组件上的 Vue 3 中获取 URL 查询参数

正确实现 Vue.js + DataTables

在 vuejs 中的图像中包含 router-link 标记

VueJS + VueRouter:有条件地禁用路由

在 vuejs 中将旧代码修改为 vue router 4

v-for 中的 VueJS 插槽

NUXT如何将数据从页面传递到布局

在加载数据之前触发mounted方法 - VueJS

Select 下拉列表中的复选框后如何清除 v-autocomplete(多个)搜索输入?

将登录页面包含在单页应用程序中是否不安全?

克隆元素并附加到 DOM 的正确方法

vue 未在实例上定义,但在渲染期间引用