在vue中使用watch监听对象或数组
最近发现在vue中使用watch监听对象或者数组时，当数组或者对象只是单一的值改变时，并不会出发watch中的事件。
在找问题过程中，发现当数组使用push一类的方法时，会触发watch，如果只是单一改变，如object[index] = newData，并不会触发，而对象同理。
解决方法：
使用vue的set方法
即 this.$set(Object,index,newdata)
Object为你需要改变的数组，index为要改变的数组下标，newdata为新值。
这样的话，watch中的监听事件就会被触发。
在vue中使用watch监听对象或数组的更多相关文章
- vue中的数据监听以及数据交互
现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...
- vue中如何深度监听一个对象？
大家都知道,Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果.那 ...
- vue中watch深度监听
监听基本类型的都是浅度监听 watch的深度监听,监听复杂类型都是深度监听(funciton ,arrat ,object) // 监听对象 data(){ return { a:{ b:, c: } ...
- vue中的事件监听之——v-on vs .$on
跟着视频中老师的教学视频学vue的时候,看很多时候都用@(v-on)来监听子级emit的自定义事件,但在bus总线那块,又用.$on来监听bus自身emit的事件,v-on之间似乎相似但又不同,今天对 ...
- vue 2.0 watch 监听对象的变化
- vue中输入框事件监听 v-on:input
<van-field v-model="inputVal" v-on:input="search" />
- 在nodejs中利用 Proxy监听对象值的获取
1 window = new Proxy(global, { 2 get: function (target, key, receiver) { 3 console.log("window. ...
- Vue之watch监听对象中某个属性的方法
新建 userinfo = { name: "小明", age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...
- vue 监听对象里的特定数据
vue 监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...
随机推荐
- python3.*的一些笔记
因为使用python越来越频繁,有一些细节的东西经常用后一段时间没去用就会忘记,做些简单的笔记吧. 1.break和continue和pass a = 0 while 1: a+=1 if(a%3== ...
- redis 哈希(hash)函数
哈希(hash)函数 hSet 命令/方法/函数 Adds a value to the hash stored at key. If this value is already in the has ...
- JavaScript自定义事件和触发(createEvent, dispatchEvent)
$(dom).addEvent("ft", function() { alert("走起"); }); // 创建 var evt = document.cre ...
- css img 隐藏的边距
因为图片存在浏览器默认的边距,正常的情况下,增加这样的属性来消除多余的边距或者多1px的情况 img { display: block; border: node; } 但是这样的话img在父元素里设 ...
- C#基本方法（瞎写写）
public static IEnumerable<T> GetAll<T>() where T : new() { using (var conn = new Profile ...
- python习题二
1.输入1-127的ascii码并输出对应的字符 for i in range(1,128): print(chr(i)) 2.输入a,b,c,d,4个整数,计算a+b-c*d的结果 a = i ...
- axios请求
axios.get('/user?ID=12345') .then(function (response) { console.log(response); console.log(response. ...
- java线程学习之yield方法
yield方法是暂停当前正在执行的线程对象,并执行其他线程. 这是一个静态方法,一旦执行,它会使当前线程让出CPU.让出的cpu并不代表当前线程不执行了.当前线程让出CPU后,还会CPU资源的争夺,但 ...
- quill富文本编辑器 API
//1. 从第三个开始删除,删除4个 // console.log(this.quill.deleteText(2, 4)); // 12345678 1278 // 2.(返回对象)返回从第三个开始 ...
- LOJ #10070 最小生成树计数
一道mst-- 最开始是毫无头绪,于是就点开了--->题解 大部分题解都是矩阵树--然而第一篇题解告诉了我们暴搜也能过( 思路大概是说,对于一个图\(G\),它的所有最小生成树的相同权值的边的数 ...