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自动闭合html标签(自动补全html标记)
Oct 04 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
几行js代码实现自适应
Feb 24 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 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
Session的工作方式
2006/10/09 PHP
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
PHP中比较时间大小实例
2014/08/21 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
Python常见字典内建函数用法示例
2018/05/14 Python
django静态文件加载的方法
2018/05/20 Python
详解django中使用定时任务的方法
2018/09/27 Python
Pycharm更换python解释器的方法
2018/10/29 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
Django继承自带user表并重写的例子
2019/11/18 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
先进单位申报材料
2014/12/25 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
字节飞书面试promise.all实现示例
2022/06/16 Javascript