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 相关文章推荐
js 内存释放问题
Apr 25 Javascript
Javascript 类型转换方法
Oct 24 Javascript
五个jQuery图片画廊插件 推荐
May 12 Javascript
js随机生成26个大小写字母
Feb 12 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
js实现4个方向滚动的球
Mar 06 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
vue自定义指令实现方法详解
Feb 11 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 Javascript
js回调函数仿360开机
Dec 26 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实现xml转换数组的方法示例
2017/02/03 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
Python基类函数的重载与调用实例分析
2015/01/12 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
python调用fortran模块
2016/04/08 Python
python实现猜数字小游戏
2020/03/24 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
活动邀请函范文
2014/01/19 职场文书
亲子读书活动方案
2014/02/22 职场文书
买房委托公证书
2014/04/08 职场文书
道歉信怎么写
2015/05/12 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
企业法人任命书
2015/09/21 职场文书
解析python中的jsonpath 提取器
2022/01/18 Python
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL
Docker安装MySql8并远程访问的实现
2022/07/07 Servers