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 相关文章推荐
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
解决js正则匹配换行问题实现代码
Dec 10 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
react ant Design手动设置表单的值操作
Oct 31 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
js实现搜索栏效果
2018/11/16 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
python使用递归解决全排列数字示例
2014/02/11 Python
python实现二维插值的三维显示
2018/12/17 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
医学检验专业个人求职信范文
2013/12/04 职场文书
在校学生职业规划范文
2014/01/08 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
李强优秀员工观后感
2015/06/16 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers