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动态创建标签示例代码
Jun 09 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 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 清除网页病毒的方法
2008/12/05 PHP
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
PHP中比较时间大小实例
2014/08/21 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
php session_decode函数用法讲解
2019/05/26 PHP
javascript中的作用域scope介绍
2010/12/28 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
vue一步步实现alert功能
2017/07/05 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
three.js实现圆柱体
2018/12/30 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
详解Python中heapq模块的用法
2016/06/28 Python
Python Socket使用实例
2017/12/18 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
python爬虫容易学吗
2020/06/02 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
百联网上商城:i百联
2017/01/28 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
大客户销售经理职责
2013/12/04 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书