最近发现在vue中使用watch监听对象或者数组时，当数组或者对象只是单一的值改变时，并不会出发watch中的事件。

在找问题过程中，发现当数组使用push一类的方法时，会触发watch，如果只是单一改变，如object[index] = newData，并不会触发，而对象同理。

解决方法：

使用vue的set方法

即 this.$set(Object,index,newdata)

Object为你需要改变的数组，index为要改变的数组下标，newdata为新值。

这样的话，watch中的监听事件就会被触发。

在vue中使用watch监听对象或数组的更多相关文章

  1. vue中的数据监听以及数据交互

    现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...

  2. vue中如何深度监听一个对象？

    大家都知道,Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果.那 ...

  3. vue中watch深度监听

    监听基本类型的都是浅度监听 watch的深度监听,监听复杂类型都是深度监听(funciton ,arrat ,object) // 监听对象 data(){ return { a:{ b:, c: } ...

  4. vue中的事件监听之——v-on vs .$on

    跟着视频中老师的教学视频学vue的时候,看很多时候都用@(v-on)来监听子级emit的自定义事件,但在bus总线那块,又用.$on来监听bus自身emit的事件,v-on之间似乎相似但又不同,今天对 ...

  5. vue 2.0 watch 监听对象的变化

  6. vue中输入框事件监听 v-on:input

    <van-field v-model="inputVal" v-on:input="search" />

  7. 在nodejs中利用 Proxy监听对象值的获取

    1 window = new Proxy(global, { 2 get: function (target, key, receiver) { 3 console.log("window. ...

  8. Vue之watch监听对象中某个属性的方法

    新建 userinfo = { name: "小明",  age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...

  9. vue 监听对象里的特定数据

    vue  监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...

随机推荐

  1. Linux运维跳槽40道面试精华题

    Linux运维跳槽40道面试精华题 运维派 3天前 1.什么是运维?什么是游戏运维? 1)运维是指大型组织已经建立好的网络软硬件的维护,就是要保证业务的上线与运作的正常,在他运转的过程中,对他进行维护 ...

  2. 关于element组件中分页的一些个人思路

    最近在用element,用到了它的分页这个组件,我这边的情况是,我前端请求数据,数据大概有20个的样子,把数据存在data的一个数组里面,用一个v-for循环遍历数组内容,并用div装起来,这样20个 ...

  3. 关于Java多线程的线程同步和线程通信的一些小问题（顺便分享几篇高质量的博文）

    Java多线程的线程同步和线程通信的一些小问题(顺便分享几篇质量高的博文) 前言:在学习多线程时,遇到了一些问题,这里我将这些问题都分享出来,同时也分享了几篇其他博客主的博客,并且将我个人的理解也分享 ...

  4. 04-python3.5-模拟三级菜单-省-县-区域--01

    #!/usr/bin/env python # -*- coding:utf-8 -*- #Author:XZ data = { '北京':{ "昌平":{ "沙河&qu ...

  5. Ant构建原理及build.xml文档描述

    最近在改写jmeter,用到ant构建,记录一下. Ant的概念Make命令是一个项目管理工具,而Ant所实现功能与此类似.像make,gnumake和nmake这些编译工具都有一定的缺陷,但是Ant ...

  6. CentOS7 手动部署flannel并启用vxlan

    本以为docker准备妥当之后,就可以直接上k8s了,结果yum install kubernetes,报错:Error: docker-ce conflicts with docker-1.9.1 ...

  7. 安卓GridView奇偶行不同颜色

    背景:安卓制作表格,两列多行,奇数行和偶数行背景色不同 分析:GridView是经常用来制作表格的,但是和ListView不同,不能简单的用position % 2 == 0/1 来判断奇偶行,下面提 ...

  8. 2019/4/17 wen 注解、垃圾回收、多线程

  9. Vue 组件&组件之间的通信 之 单向数据流

    单向数据流:父组件值的更新,会影响到子组件,反之则不行: 修改子组件的值: 局部数据:在子组件中定义新的数据,将父组件传过来的值赋值给新定义的数据,之后操作这个新数据: 如果对数据进行简单的操作,可以 ...

  10. id、class等各种选择器总结

    1.  id              选择器       #     class        选择器        .     标签         选择器       标签名     群组   ...