VUE2 中 v-for,v-on:click 使用需要注意的地方
来源:互联网 发布:手机淘宝清缓存的作用 编辑:程序博客网 时间:2024/05/29 17:25
今天在写一个页面的时候,需要在一个 v-for 循环里面给每个 item 绑定一个点击事件,在这个事件中我需要拿到所点击 item 里面的数据和它的 index。写法如下:
<div @click="chooseAddress(item,index)" v-for="(item,index) in addresses"></div>
这基本上就是标准写法,@click 里面的是我们的点击事件,这个点击事件需要声明在 vue 对象的 methods 节点下,在里面处理相关的逻辑。
下面才是本文的重点,记录下来,避免以后再犯这样的低级错误(说起来都是泪,自己把自己坑了一下午,,,)。
上图用红框圈起来的地方是要特别注意的,首先是 methods ,这个节点里面都是你声明的相关方法,注意的是写的时候不要漏掉了 s,是 methods,就这么一个小细节,坑了我几个小时,一直是以为定义的方法没有执行,各种搜为什么方法没有执行什么的,一直搜不到,,,,最后才发现是漏掉了一个 s ,当时真是想撞墙。
第二个注意点就是方法里面的 this ,这里的 this 是指向的是 vue 的 data 节点,也就是 vue.$data 这个对象。可以用它来直接操作你需要操作的数据。要注意的是用的时候千万不要漏写了,我当时就是在 for 循环里面漏写了 this,效果就一直出不来,我还各种去找原因,,,,
最后,vue 是一个数据驱动的框架,能通过操作数据来达到效果的地方就不要去操作 DOM了。所以我在声明的方法里面都是对数据进行操作,数据改变后,vue 会帮你去做页面渲染。
以上,就是这次的踩坑记。
阅读全文
0 0
- VUE2 中 v-for,v-on:click 使用需要注意的地方
- VUE基本指令(v-model,v-html,v-text,v-bind,v-if,v-show,v-for,v-on:click,组件,过滤器)
- Spring使用中需要注意的地方
- HttpURLConnection使用中需要注意的地方
- vue.js的事件处理器v-on:click
- Vue2 指令v-if v-show v-for v-text v-html
- Vue2.0-4 -指令v-bind 与 v-on 缩写
- Vue2 指令v-on v-model 各种表单控件
- vue的v-for使用
- v-for的学习使用
- 点击事件(v-on:click)
- Vue常用指令v-on:click
- 点击事件(v-on:click)
- 使用 IAR for AVR 时需要注意的几个地方
- Go中使用for..range语句时需要注意的地方
- vue 中,v-for和v-if同时使用
- 施足底肥V地方V的
- vue中v-for的使用,离不开的数组
- Max Sum
- 手机游戏中遇到的坑(三)
- 分布式系统事务一致性
- DWORD转为char *
- [docker]一些经常用到的docker容器启动方法
- VUE2 中 v-for,v-on:click 使用需要注意的地方
- mysql语句中的sum(if(exp1,exp2,exp3))
- 数组模拟栈+自定义异常
- go 使用lib 调用 c++ 方法(c 调用形式)
- 当使用git push origin master 报错时
- docker 入门
- 洛谷 P1171 售货员的难题 【状压dp】
- shared_ptr不明确
- openGL搭建环境及运行第一个项目