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 jq 单击和双击区分示例介绍
Nov 05 Javascript
jquery禁用右键示例
Apr 28 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
node使用request请求的方法
Dec 20 Javascript
详解node和ES6的模块导出与导入
Feb 19 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 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插件Xajax使用方法详解
2017/08/31 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
javascript 拖放效果实现代码
2010/01/22 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
easyui validatebox验证
2016/04/29 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
跟老齐学Python之Python安装
2014/09/12 Python
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
Python操作CouchDB数据库简单示例
2015/03/10 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
python3 logging日志封装实例
2020/04/08 Python
如何在python中判断变量的类型
2020/07/29 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
医学毕业生自我鉴定
2013/10/30 职场文书
2014年中秋寄语
2014/08/11 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
2016继续教育研修日志
2015/11/13 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
python脚本框架webpy的url映射详解
2021/11/20 Python
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS