dom不刷新 vue 加数据后_vue 改变数据DOM不更新，获取不到DOM的解决方法

1.vue中$nextTick的用法(获取不到DOM的解决方案)

new Vue({ el: '#app', data: { list: [] }, mounted: function () { this.get() }, methods: { get: function () { this.$http.get('/api/article').then(function (res) { this.list = res.data.data.list // ref list 引用了ul元素，我想把第一个li颜色变为红色 this.$refs.list.getElementsByTagName('li')[0].style.color = 'red' }) }, } })

我在获取到数据后赋值给数据模型中list属性，然后我想引用ul元素找到第一个li把它的颜色变为红色，但是事实上，这个要报错了，我们知道，在执行这句话时，ul下面并没有li，也就是说刚刚进行的赋值操作，当前并没有引起视图层的更新。因此，在这样的情况下，vue给我们提供了$nextTick方法，如果我们想对未来更新后的视图进行操作，我们只需要把要执行的函数传递给this.$nextTick方法，vue就会给我们做这个工作。

2.改变数据DOM不更新的解决方案 2.1数组

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：this.items[indexOfItem] = newValue

当你修改数组的长度时，例如：this.items.length = newLength

解决方案： Vue.set(this.items, indexOfItem, newValue)

this.items.splice(indexOfItem, 1, newValue)

this.items.splice(newLength)2.2对象

由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

var vm = new Vue({ data: { userProfile: { name: 'Anika' } } }) //你可以添加一个新的 age 属性到嵌套的 userProfile 对象： Vue.set(vm.userProfile, 'age', 27) //你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名： vm.$set(vm.userProfile, 'age', 27) //有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。 vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' })

来源：博客园

作者：wiliam_new

链接：https://www.cnblogs.com/wiliam/p/11769329.html