需要注意的是, vue 之所以能够监听 Model 状态的变化, 是因为 JavaScript 语言本身提供了 Proxy 或者 Object.observe() 机制来监听对象状态的变化但是, 对于数组元素的赋值, 却没有办法直接监听, 因此, 如果我们直接对数组元素赋值:
- vm.todos[0] = {
- name: 'New name',
- description: 'New description'
- };
会导致 Vue 无法更新 View
正确的方法是不要对数组元素赋值, 而是更新:
- vm.todos[0].name = 'New name';
- vm.todos[0].description = 'New description';
或者, 通过 splice() 方法, 删除某个元素后, 再添加一个元素, 达到赋值的效果:
- var index = 0;
- var newElement = {...};
- vm.todos.splice(index, 1, newElement);
Vue 可以监听数组的 splicepushunshift 等方法调用, 所以, 上述代码可以正确更新 View
来源: http://www.jb51.net/article/136081.htm