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 相关文章推荐
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
JavaScript实现联动菜单特效
Jan 07 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 Javascript
Javascript异步流程控制之串行执行详解
Sep 27 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函数
2010/02/16 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
JS 建立对象的方法
2007/04/21 Javascript
JavaScript Sort 表格排序
2009/10/31 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
python网络编程之数据传输UDP实例分析
2015/05/20 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
单位实习证明怎么写
2014/01/17 职场文书
食品业务员岗位职责
2014/03/18 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
学校运动会霸气口号
2014/06/07 职场文书
大学活动总结模板
2014/07/10 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
党员查摆剖析材料
2014/10/10 职场文书
担保书范本
2015/01/20 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers