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 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
Node.js实现数据推送
Apr 14 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
JS搜狐面试题分析
Dec 16 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
解决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
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
js字符串处理之绝妙的代码
2019/04/05 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
python使用递归解决全排列数字示例
2014/02/11 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
毕业生幼师求职自荐信
2013/10/01 职场文书
生物学专业求职信
2014/07/23 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
Python中使用subprocess库创建附加进程
2021/05/11 Python
python神经网络Xception模型
2022/05/06 Python