work-notes(5):v-for报错,[vue/require-v-for-key] Elements in iteration expect to have ‘v-bind:key‘

news/2024/7/19 12:53:54 标签: vue, js, javascript

时间:2022-04-14

文章目录

    • 报错情况
    • 报错原因
    • 解决办法
    • 2、如果报错Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive.
    • 报错原因
    • 解决办法

报错情况

在这里插入图片描述

报错原因

迭代中的[vue/require-v-for-key]元素希望有“v-bind:key”指令

解决办法

在后面加上 :key = "item.index"

2、如果报错Expected ‘v-bind:key’ directive to use the variables which are defined by the ‘v-for’ directive.

报错原因

应使用“v-bind:key”指令来使用“v-for”指令定义的变量。

解决办法

错误写法

javascript"><div v-for="ITEM in videoList" :key="index">

正确写法

javascript"><div v-for="ITEM in videoList" :key="item.index">

参考文章:
1、
https://blog.csdn.net/Da_Xiong000/article/details/118809433?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164990103516781683998471%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=164990103516781683998471&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allfirst_rank_ecpm_v1~rank_v31_ecpm-1-118809433.142v7pc_search_result_control_group,157v4control&utm_term=v-for%E8%BF%AD%E4%BB%A3%E4%B8%AD%E7%9A%84%E5%85%83%E7%B4%A0%E5%B8%8C%E6%9C%9B%E6%9C%89%E2%80%9Cv-bind%3Akey%E2%80%9D%E6%8C%87%E4%BB%A4&spm=1018.2226.3001.4187

2、
https://blog.csdn.net/u013017173/article/details/108367958?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164990126116780274163394%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=164990126116780274163394&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allfirst_rank_ecpm_v1~rank_v31_ecpm-1-108367958.142v7pc_search_result_control_group,157v4control&utm_term=v-for%E9%A2%84%E6%9C%9F%E7%9A%84%E2%80%9Cv-bind%3Akey%E2%80%9D%E6%8C%87%E4%BB%A4%E4%BD%BF%E7%94%A8%E2%80%9Cv-for%E2%80%9D%E6%8C%87%E4%BB%A4%E5%AE%9A%E4%B9%89%E7%9A%84%E5%8F%98%E9%87%8F%E3%80%82&spm=1018.2226.3001.4187


http://www.niftyadmin.cn/n/1410344.html

相关文章

work-notes(6):vue中 v-for,class 和 style 中绑定带入变量的写法,如何在style中加入变量?

时间&#xff1a;2022-04-14 更新&#xff1a;2022-04-18 文章目录原因解释:class 写法1、三元运算2、变量3、对象4、数组:style 写法1、变量2、对象3、三元运算原因解释 在 v-for 写入到 style 或 class&#xff0c;特别是绑定的 :style、:class 就不生效 :class 写法 1、…

work-notes(7):如何让元素从中心放大?如何让图片从中心放大?

时间&#xff1a;2022-04-18 文章目录原因解释讲解实现代码原因解释 之前一直在纠结如何让背景图片从中心放大&#xff0c;好像 background-size 做不到这样的效果&#xff1b; 最后找到了一个最简单的方法&#xff0c;一个 CSS 属性就能解决&#xff1b; 讲解 其实就是通过…

work-notes(8):如何制作卡片凹陷?如何制作梯形?如何制作有凹陷的盒子?如何制作透明凹陷?

时间&#xff1a;2022-04-20 文章目录1、实现描述2、思路分析3、针对 头部凹陷三盒子摆放方式4、给两边盒子的属性5、简单代码实现例子6、总结1、实现描述 我们公司开发了一个视频会议网站&#xff0c;有一个会议列表卡片头部是有一个透明凹陷的&#xff0c;NND还没见过这样无…

work-notes(9):vue 如何在 v-if 里面对数组的长度进行判断?为什么 v-if 里面判断数组长度 length报错?

时间&#xff1a;2022-04-22 文章目录1、原因解释2、错误写法2.1 报错3、正确方式3.1 判空3.2 判非空1、原因解释 首先数组长度为 0 的时候可能会报错&#xff0c;因为数组可能存在有 undefined 的状况&#xff1b; 所以写的判断条件尽可能的全一点&#xff1b; 2、错误写法…

work-note(10):父子传值时,父组件不会自动更新(刷新)展示出子组件,子组件创建成功,但是需要手动刷新才能展示子组件

时间&#xff1a;2022-05-15 文章目录问题描述问题分析解决方式1、首先确定传入的值2、监听这个传入的值&#xff08;重点&#xff09;监听写法&#xff1a;整体代码&#xff1a;附加问题描述 刚刚开始做项目&#xff0c;没有多少工作经验&#xff0c;好不容易查做了父子组件传…

work-notes(11):从父组件传入到子组件的值存在有多种类型时怎么写,怎么写传入值才正确?

时间&#xff1a;2022-05-15 文章目录问题描述正确写法重点问题描述 &#xff08;1&#xff09;当父组件传到 子组件的值&#xff0c;有多个的时候时怎么写才正确&#xff1f;好比说&#xff0c;我给一个子组件盒子&#xff0c;我传入的值可能是一个数字&#xff08;Number&am…

work-notes(12):如何二次封装 Element UI 的 dialog 弹窗,发现弹窗只能点击触发一次是什么原因,如何解决弹窗只能触发一次的问题?

时间&#xff1a;2022-05-15 文章目录问题描述问题分析1、如何二次封装 element UI 的 dialog 弹窗&#xff1f;2、实现过程&#xff08;1&#xff09;在 script 标签 中 props 传入值&#xff08;2&#xff09;绑定到 dialog 标签内主要结构&#xff1a;个人例子&#xff1a;解…

work-notes(13):如何去掉 el-select 的边框?为什么border:none; 去不掉el-select 的边框?去掉 bo-shadow

时间&#xff1a;2022-05-23 文章目录问题描述解决办法用法1、全局写法2、局部写法问题描述 前些天一个功能需要用到 el-select&#xff0c;但是不用透明的边框&#xff1b;给了 border:none; 却不生效&#xff1b;大概是这样&#xff1a;解决办法 1、首先要去掉 border&…