在使用数组的时候,数组内部数据发生改变,可是与数组绑定的页面的数据却没有发生变化。javascript
- {{item.name}}
data () {
return {
msg: 'Welcome to Your Vue.js App',
todos: [{
name: 'aa',
age: 14
}, {
name: 'bb',
age: 15
}, {
name: 'cc',
age: 16
}],
obj: {name: 'lihui', age: 17}
}
},
methods: {
changeTodos: function () {
var _this = this
_this.todos[0] = {
name: 'zhangsan',
age: 15
}
console.log(this.todos)
/*
this.$set(this.todos, 0, 'nn')
this.$forceUpdate()
*/
}
这种修改得方式,没法出发数组得set,致使页面得数据不会改变。有三种解决方式。java
1、使用全局得set方法。数组
this.$set(this.todos,0,{name: 'zhangsan',age: 15});或者对象this.$set(this.obj,'key',value);ui
二,强制更新this
this.$forceUpdate()