vue中提示$index is not defined错误的解决方式


Posted in Javascript onSeptember 02, 2020

今天学习Vue中遇到了一个报错信息:$index is not defined,是我写了个for循环在HTML中,然后是因为版本的问题

下面是解决方法:

原来的是 v-for="person in items"

v-on:click="deletePerson($index)"//这个仅仅适用于1.0版本,不要采坑了同学们

这个在Vue1.0版本中式适用的可以直接使用$index,但是在2.0是不适合的

在Vue 2.0版本中获取索引我们需要通过 v-for = "(person ,index) in items ", 点击事件我们也不能使用$index,应该使用

v-on:click="deletePerson(index)"

补充知识:vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改

.vue

<div class="commonHeader" v-bind:class="{ 'navActive': scrollFlag }">

<img src="@/images/home/icon_jdjr.png" v-bind:class="{ 'scrollFlag': scrollFlag }">

data

scrollFlag:false,

mounted

window.addEventListener('scroll', this.handleScroll)

methods

handleScroll () {
 let _this=this;
 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
 // console.log(scrollTop)
 if(scrollTop){
  _this.scrollFlag=true
 }else{
  _this.scrollFlag=false
 }
}

以上这篇vue中提示$index is not defined错误的解决方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
javascript里使用php代码实例
Dec 13 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 Javascript
详解实现vue的数据响应式原理
Jan 20 Vue.js
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 #Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 #Javascript
JS继承实现方法及优缺点详解
Sep 02 #Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 #Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 #Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 #Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 #Javascript
You might like
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
ionic2懒加载配置详解
2017/09/01 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
Python面向对象进阶学习
2019/05/21 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
Python读写压缩文件的方法
2020/07/30 Python
python如何快速拼接字符串
2020/10/28 Python
Python函数调用追踪实现代码
2020/11/27 Python
如何用Django处理gzip数据流
2021/01/29 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
小学生红领巾广播稿
2014/01/21 职场文书
保险公司早会主持词
2014/03/22 职场文书
小学生环保标语
2014/06/13 职场文书
低碳环保演讲稿
2014/08/28 职场文书
2014年领班工作总结
2014/11/25 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
解析Java中的static关键字
2021/06/14 Java/Android