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函数ajax
Aug 20 Javascript
ASP Json Parser修正版
Dec 06 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
JS实现网页端猜数字小游戏
Mar 06 Javascript
JS实现多选框的操作
Jun 24 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 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
基于mysql的bbs设计(四)
2006/10/09 PHP
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
Yii2单元测试用法示例
2016/11/12 PHP
通过javascript把图片转化为字符画
2013/10/24 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
给Python初学者的一些编程技巧
2015/04/03 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
python pytest进阶之fixture详解
2019/06/27 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
django使用channels实现通信的示例
2020/10/19 Python
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
学习新党章思想汇报
2014/01/09 职场文书
家长对小学生的评语
2014/01/28 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
职称评定自我鉴定
2014/03/18 职场文书
大学社团活动总结
2014/04/26 职场文书
材料员岗位职责
2015/02/10 职场文书
求职信如何撰写?
2019/05/22 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
方法汇总:Python 安装第三方库常用
2022/04/26 Python