我在数据中初始化了一个数组sheets,当按下一个按钮时,有一个项目被按下

data() {
    return {
        sheets: []
    };
}

在html中,我试图为这个数组中的每个元素添加Card个组件,并将数据作为props 传递,但没有任何组件得到渲染,也没有错误消息.我也试着把v-for直接放在组件上,但结果是一样的

<div id="sheets">
    <template v-for="c in sheets">
        <Card :info="c"/>
    </template>
</div>

同时,如果我这样做,它会正确显示数组中的所有数据,所以我不明白这里出了什么问题

<div id="sheets">
    <template v-for="c in sheets">
        <span>{{c}}</span>
    </template>
</div>

--

Solution

推荐答案

确保你完成了以下correctly件事情:

  1. 已导入Card组件
  2. 通过和访问props
  3. 变量名和id名之间没有冲突

在使用v-for时,您需要知道的下一件事是将:key添加到元素中,该元素作为唯一id,并让Vue检测到v-for中的每个元素都是唯一的.使用:key时需要注意的一点是,您不能在<template>标记上使用:key.

使用v-if添加验证是一个好主意,因此v-for只在数组不为空时执行.

<div id="sheets">
    <template v-if="sheets.length">
        <Card v-for="(sheet,index) in sheets" :key="index" :info="sheet" />
    </template>
</div>

Edit 1:正如Michal在 comments 部分中提到的,使用index可能会导致调试问题的困难.您可以使用:key="sheet",或者如果sheet是包含一些唯一id的对象,则使用:key="sheet.id"并go 掉index

// use this if sheet is not an object
<div id="sheets">
    <template v-if="sheets.length">
        <Card v-for="sheet in sheets" :key="sheet" :info="sheet" />
    </template>
</div>

OR

// use this if sheet is an object having some unique id in it
<div id="sheets">
    <template v-if="sheets.length">
        <Card v-for="sheet in sheets" :key="sheet.id" :info="sheet" />
    </template>
</div>

Javascript相关问答推荐

当作为表达式调用时,如何解析方法decorator 的签名?

配置WebAssembly/Emscripten本地生成问题

从Node JS将对象数组中的数据插入Postgres表

引用在HTMLAttributes<;HTMLDivElement>;中不可用

并不是所有的iframe都被更换

在open shadow—root中匹配时,使用jQuery删除一个封闭的div类

Eval vs函数()返回语义

在css中放置所需 colored颜色 以填充图像的透明区域

如何使用JS创建一个明暗功能按钮?

使用父标签中的Find函数查找元素

用于部分字符串的JavaScript数组搜索

无法设置RazorPay订阅API项目价格

如何压缩图像并将其编码为文本?

将延迟加载的模块转换为Eager 加载的模块

将以前缓存的 Select 器与querySelector()一起使用

递归地将JSON对象的内容上移一级

webpack 5和mini-css-extract-plugin在将scss保存到css文件后不加载css

在类中为其他方法中的addEventlistener调用方法中的元素HTML

Chart.js折线图动态更改其y轴

JS函数返回未定义的值,即使返回值有效