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 相关文章推荐
prettify 代码高亮着色器google出品
Dec 28 Javascript
javascript学习笔记(十一) 正则表达式介绍
Jun 20 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 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实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python字符串切片操作知识详解
2016/03/28 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
Django中间件基础用法详解
2019/07/18 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
程序员岗位职责
2013/11/11 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
单位承诺书格式
2014/05/21 职场文书