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 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
javascript demo 基本技巧
Dec 18 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
vue实现移动端触屏拖拽功能
Aug 21 Javascript
JavaScript组合继承详解
Nov 07 Javascript
JS高级程序设计之class继承重点详解
Jul 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
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
浅谈PHP中的
2016/04/23 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
Js 本页面传值实现代码
2009/05/17 Javascript
js 表格隔行颜色
2009/12/02 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
python实现飞机大战项目
2020/03/11 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
Farnell德国:电子元器件供应商
2018/07/10 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
初三班主任寄语大全
2014/04/04 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
小学六一主持词开场白
2015/05/28 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技