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 相关文章推荐
Javascript 面向对象 继承
May 13 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
JavaScript 数组详解
Oct 10 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 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中加session验证)
2012/08/22 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
对于jQuery性能的一些优化建议
2015/08/13 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
canvas实现钟表效果
2017/02/13 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
python 默认参数问题的陷阱
2016/02/29 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
用python写测试数据文件过程解析
2019/09/25 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
Python bisect模块原理及常见实例
2020/06/17 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
2014年消防工作实施方案
2014/02/20 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
党员年终个人总结
2015/02/14 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
DSP接收机前端设想
2022/04/05 无线电
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis