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 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 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/20 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
Python 常用string函数详解
2016/05/30 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
基于python实现名片管理系统
2018/11/30 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
项目资料员岗位职责
2013/12/10 职场文书
优秀民警事迹材料
2014/01/29 职场文书
秘书英文求职信范文
2014/01/31 职场文书
商业融资计划书
2014/04/29 职场文书
企业安全生产规章制度
2015/08/06 职场文书
java中如何截取字符串最后一位
2022/07/07 Java/Android