Rumah > hujung hadapan web > tutorial js > Vue通过下表处理数组页面不渲染

Vue通过下表处理数组页面不渲染

php中世界最好的语言
Lepaskan: 2018-04-11 16:05:14
asal
1554 orang telah melayarinya

这次给大家带来Vue通过下表处理数组页面不渲染,Vue通过下表处理数组页面不渲染的注意事项有哪些,下面就是实战案例,一起来看一下。

需要注意的是,Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化。但是,对于数组元素的赋值,却没有办法直接监听,因此,如果我们直接对数组元素赋值:

vm.todos[0] = {
  name: 'New name',
  description: 'New description'
};
Salin selepas log masuk

会导致Vue无法更新View。

正确的方法是不要对数组元素赋值,而是更新:

vm.todos[0].name = 'New name';
vm.todos[0].description = 'New description';
Salin selepas log masuk

或者,通过splice()方法,删除某个元素后,再添加一个元素,达到“赋值”的效果:

var index = 0;
var newElement = {...};
vm.todos.splice(index, 1, newElement);
Salin selepas log masuk

Vue可以监听数组的splice、push、unshift等方法调用,所以,上述代码可以正确更新View。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

select的option叠加如何处理

vue.js中怎么导入css库

Atas ialah kandungan terperinci Vue通过下表处理数组页面不渲染. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan