基于vue中解决v-for使用报红并出现警告的问题


Posted in Javascript onMarch 03, 2018

代码报红对于追求优美代码的强迫症患者来说看着很不舒服,报红如下:

基于vue中解决v-for使用报红并出现警告的问题

控制台中也会有:

(Emitted value instead of an instance of Error) <Option v-for="item in searchTypeList">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.

这样的提示,解决这个报红的问题,我们要根据他的提示,循环的时候加入一个唯一的key,这里选择使用index:

<ul 
class="clearfix course-list">
<li 
class="left" 
v-for="(item,index)
in gradeClassfy.primary.grade"
:key="index"><a
href="#" rel="external nofollow" >{{item.name}}</a></li>
</ul>

如此,报红消失。

以上这篇基于vue中解决v-for使用报红并出现警告的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
angular之ng-template模板加载
Nov 09 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 #Javascript
vue.js select下拉框绑定和取值方法
Mar 03 #Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 #Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 #Javascript
JS表单传值和URL编码转换
Mar 03 #Javascript
jQuery实现左右滑动的toggle方法
Mar 03 #jQuery
vue中实现移动端的scroll滚动方法
Mar 03 #Javascript
You might like
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python删除列表中重复记录的方法
2015/04/28 Python
python链接Oracle数据库的方法
2015/06/28 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
wxPython实现带颜色的进度条
2019/11/19 Python
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
JAVA和C++的区别
2013/10/06 面试题
团支部建设方案
2014/05/02 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
给校长的一封检讨书
2014/09/20 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
MySQL触发器的使用
2021/05/24 MySQL
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python
使用HttpSessionListener监听器实战
2022/03/17 Java/Android