基于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使用报红并出现警告的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
您可能感兴趣的文章:
- 解决vue组件中使用v-for出现告警问题及v for指令介绍
- 详解Vue中使用v-for语句抛出错误的解决方案
- 基于vue 开发中出现警告问题去除方法
相关推荐
-
详解Vue中使用v-for语句抛出错误的解决方案
Vue 中使用v-for语句抛出错误的解决方案 今天在维护以前的项目的时候遇见了下面的报错情况,开始我以为是因为jQuery和Vue冲突了,所以把以前的jQuery改了,但是还是出现同样的错误-通过查阅资料,发现是因为循环的变量里面的值重复了,导致Vue报错. 复制代码 代码如下: Uncaught (in promise) TypeError: Cannot read property 'removeChild' of null 接下来查了一下解决方案,发现在Vue 2.0之前的版本可以通过在
-
解决vue组件中使用v-for出现告警问题及v for指令介绍
在项目中运行v-for代码段时, <flexbox v-if="roleShow" style="padding:15px; box-sizing: border-box;"> <flexbox-item v-for="role in roles " > <x-button mini :type="role.type" style="padding: 0 14px" @clic
-
基于vue 开发中出现警告问题去除方法
出现这个警告问题的时候 我们可以去main.js中在头部添加这句话: Vue.config.productionTip = false 这样即可去除警告! 以上这篇基于vue 开发中出现警告问题去除方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 使用vue.js开发时一些注意事项 Vue开发过程中遇到的疑惑知识点总结
-
基于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
-
基于vue中keep-alive缓存问题的解决方法
vue开发的时候,我们经常会有这样的需求:开发一个详细页面来展示商品的详细信息,根据列表页传入的id进行请求,拿到对应的数据进行渲染. 但是一般在路由上都会加上keep-alive保持数据的状态,除非强制无缓存刷新,这就导致第一次进入详情页面时,可以在created中拿到id,但是返回后,再点击进入,就不会再走相应的生命周期了,无法拿到新的id 这时候可以使用vue的$destroy()方法 这是vue的一个生命周期,完全销毁一个实例.清理它与其它实例的连接,解绑它的全部指令及事件监听器. 不用
-
基于vue中的scoped坑点解说
今天在覆盖iview组件样式的时候发现一个问题,就是无法覆盖组件原有的样式,最后在github的issue中找到了答案: 不要使用scoped属性.于是我查找了下关于scoped的文章. 我们假设把这种组件叫做模块私有组件,其他的未加scoped的叫做模块一般组件.通过查看DOM结构发现:vue通过在DOM结构以及css样式上加唯一不重复的标记,以保证唯一,达到样式私有化模块化的目的. 代码如下: //valChange.less(使用了嵌套规则) #valueSlide{ .bigSlider
-
基于vue中css预加载使用sass的配置方式详解
1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 2.在build文件夹下的webpack.base.conf.js的rules里面添加配置,如下红色部分 { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } <span style="color:#454545;"
-
基于vue中对鼠标划过事件的处理方式详解
鼠标事件进行监听 需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层 翻阅了一些博客,发现好多都提到了mouse事件,如mouseover.mouseout.mouseenter.mouseleave,在之后我自己也通过这种方法进行了尝试. <template> <el-table :data="tableData" stripe style="width: 100%&
-
在vue中解决提示警告 for循环报错的方法
警告 1.出现这个警告问题的时候 我们可以去main.js中在头部添加这句话: Vue.config.productionTip = false 这样即可去除警告! 2.在build文件下的webpack.base.conf.js文件中, 将 ...(config.dev.useEslint ? [createLintingRule()] : []),注释掉, const createLintingRule = () => ({ test: /\.(js|vue)$/, loader: 'esl
-
基于Vue中使用节流Lodash throttle详解
在Vue中使用 Lodash.throttle 来做节流 在Vue中,有时需要对ajax请求提交进行节流操作.这时候,如果页面在请求成功之后会跳转,使用vue指令once或者加载一个loading遮罩禁止点击即可,但如果请求之后不跳转,并且loading不适用时,需要通过其他方式来实现节流,比如通过标识位判断等,这里我们着重说一下如何通过lodash.throttle来实现节流 lodash lodash是一个广受欢迎的js工具库,其中包含了各种各样的工具函数,方便开发时不需要反复造轮子,更关注
-
vue中解决拖拽改变存在iframe的div大小时卡顿问题
写在最前 针对于在vue中实现拖拽改变两左右个div大小的方式,请查看上一篇文章<vue中实现拖动调整左右两侧div的宽度>.此文章主要针对于实际应用中需要拖拽改变大小的组件中使用iframe框架时存在明显卡顿的问题,比如这样,右侧div中使用了一个iframe组件,导致实际操作中出现两个问题,一个是拖不动,另外一个是无法根据鼠标移动,快速响应,甚至在监听鼠标的按下和松开事件上都有明显的卡顿问题.如果去除右侧iframe框架,则没有问题. 有iframe情况 无iframe情况 问题原因&am
-
基于Vue中的父子传值问题解决
主题是Vue中几种常见的传值方法...先写个父子传值吧 vue-cli构建项目目录,噜啦啦,这个就不用说了吧. 接着创建父子组件,父组件Father.vue,子组件Son.vue(随意起名,开心就好),然后在父组件中引入子组件,创建一个父组件的路由.车门已经焊死了,请继续往下看 1.父传子 Father.vue(用v-bind(简写 : ) 将父组件传的值绑定到子组件上) <template> <div> 我是爸爸:{{message}} <hr> <Son :t
-
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说,是Chrome不允许在用户对网页进行触发之前播放音频.不光是这样,在页面加载完毕的情况下,用户没有click.dbclick.touch等主动交互行为,使用js直接调用.play() 方法的话,chrome都会抛出如下错误:Uncaught (in promise) DOMException: 解决
随机推荐
- php使用ZipArchive函数实现文件的压缩与解压缩
- 微信小程序获取用户openId的实现方法
- php中文乱码问题的终极解决方案汇总
- 基于Python实现对PDF文件的OCR识别
- linux mysql5.6版本的安装配置过程
- FullCalendar日历插件应用之数据展现(一)
- 完美解决gvim的菜单乱码问题
- 基于Bootstrap的网页设计实例
- php类中的各种拦截器用法分析
- JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
- Jquery中使用show()与hide()方法动画显示和隐藏图片
- 解析John Resig Simple JavaScript Inheritance代码
- WinForm下 TextBox只允许输入数字的小例子
- Java字符流和字节流对文件操作的区别
- Android编程实现的一键锁屏程序详解
- android的RecyclerView实现拖拽排序和侧滑删除示例
- java使用Cookie判断用户登录情况的方法
- Linux服务器下Nginx与Apache共存的实现方法分析
- java文本处理之计算文本句子数
- 实现PHP中session存储及删除变量