关于vue数组中对象属性变更页面没重新渲染的问题

前段时间做开发的时候用mqtt监听了服务端信息，推送过来的数据要变更数组里面的对象的数据，修改好后但是页面并没有更新，因为javascript机制，vue并不能检测到数组变化，也是查阅知道了$set()函数,

具体用法：

　　arr.$set(index, { name : value }), index: 索引，name: 数组中对象的属性名, value: 要赋给属性的值

this.footerList.$set(i, {    siteId : monitorSiteData[j].siteId,    outNum : monitorSiteData[j].outNo,    bookNum : monitorSiteData[j].preorderNo,    useNum : monitorSiteData[j].availableNo,    onlineNum : monitorSiteData[j].prepareNo,    homeNum : monitorSiteData[j].inNo,    name : self.footerList[i].name});这是我在项目中使用的情况，完美解决vue数组中对象属性改变页面不刷新的问题！请大家多多指教

时间： 2024-10-13 00:12:42

关于vue数组中对象属性变更页面没重新渲染的问题的相关文章

vue数组中对象属性变化页面不渲染问题

做checkbox多选功能的时候遇到了一个坑,逻辑怎么看都对,但是就是有bug,最后发现数组那里值变了页面勾选没有重新渲染. 换了关键词搜索找到了相关方法. 其实之前读文档教程的时候看到过这里,但是只有真的使用之后才会有最直接的感触. ------------------------------------------- 数组更新检测变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splic

递归找出数组中对象属性为某个值的选项，不改变原数组

arr数组每一项为一个对象,并且每一项可能有children属性,其值为同它本身一样的数组,要求找到数组中checked==true的值(前提:如果其子元素checked==true,那么父级的checked一定为true) 这里的逻辑跟该自定义组件相似:http://www.cnblogs.com/XHappyness/p/7451611.html findValue(arr) { let newArr= [].concat(arr);//把值赋值给一个新数组,而不是赋值引用:如果直接 let

JS中：json对象数组按对象属性排序

var array = [ {name: 'a', phone: 1}, {name: 'b', phone: 5}, {name: 'd', phone: 3}, {name: 'c', phone: 4} ] array.sort(getSortFun('desc', 'phone')); function getSortFun(order, sortBy) { var ordAlpah = (order == 'asc') ? '>' : '<'; var sortFun = new F

[转] 小程序修改数组中对象的某个值或者修改对象值

小程序中获取当前data定义的值,用this.data.xxx setData的时候要修改的值是不需要加this.data.xxx的,直接xxx, 一般直接修改data的值直接修改,修改数组中对象的值或者对象的属性值都要先转为字符串再加中括号,如果有变量可以用ES6的模版字符串反单引号或者字符串拼接一下. Page({ data: { currentValue:"aa", todoLists:[ { detail:"", date:"", loc

vue数组和对象方法

变异方法:会改变原始数组 push() pop() shift() unshift() splice() sort() reverse() 非变异方法:不会改变原始数组,但是会返回一个新数组 fliter() slice() concat() vue不能检测变动的数组利用索引值直接设置内容时 vm.items[indexOfItem] = newValue: 修改数组的长度时 vm.items.length = newLength: //这种写法并不能实时检测到变化 var vm = new

JavaScript中对象属性的添加和删除

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /* * 用.为对象添加属性用关键字delete删除属性用[]添加属性和.的不同 r.name==r["name"]; r.

js遍历数组重复值和数组中对象重复值

数组去除重复值: arr.indexOf() 方法返回某个指定字符串值再字符中首次出现的位置, 如果数组中没有则返回-1 var arr=[2,8,5,0,5,2,6,7,2]; function unique1(arr){ var result=[]; for (var i = 0; i < arr.length; i++) { if(hash.indexOf(arr[i])==-1){ resule.push(arr[i]); } } return result; } 数组中对象去除的重复值

Vue 改变数组中对象的属性不重新渲染View的解决方案

在解决问题之前,我们先来了解下 vue响应性原理: Vue最显著的一个功能是响应系统-- 模型只是一个普通对象,修改对象则会更新视图.受到javascript的限制,Vue不能检测到对象属性的添加或删除,因为vue在初始化实列时将属性转为getter/setter,所以属性必须在data对象上才能让vue转换它.但是vue可以使用 Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上:如下代码: Vue.set(obj, '_isHover', true); 或

解决vue中对象属性改变视图不更新的问题

在使用VUE的过程中,会遇到这样一种情况, vue data 中的数据更新后,视图没有自动更新. 这个情况一般分为两种, 一种是数组的值改变,在改变数组的值的是时候使用索引值去更改某一项,这样视图不会实时更新第二种情况是改变了对象的某一项,但是其他依赖这个数据的视图没更新第一种情况是因为直接通过索引去改变数组,vue 对象监听不到他的变化所以没有更新. ----解决方法 1. Vue.set(example1.items[0], { childMsg: 'Changed!'}) 2.使用