观察变量更改是否不起作用
提问于 2016-08-03 08:49:10
我需要检查变量rasters_previews_list以进行更改。下面是我的代码：
var userContent = Vue.extend({
template: '<p>Some template</p>',
data: function () {
return {
rasters_previews_list: []
}
},
watch: {
'rasters_previews_list': function(value, mutation) {
console.log("Value changed");
}
}
});但在控制台中，当Value changed获得新数据时，我看不到它。
数据变更功能：
map.on('draw:created', function (e) {
//...
Vue.http.post('/dbdata', DataBody).then((response) => {
userContent.rasters_previews_list = response; // putting JSON answer to Component data in userContent
console.log(response);
}, (response) => {
console.log("Can't get list rasters metadata from DB. Server error: ", response.status)
});我更改了map.on('draw:created', function (e) (Leaflet )中的值。我看到了console.log的输出，所以看起来数据正在改变。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-08-03 08:57:58
如果想要更改数组的值，则必须使用特殊的数组扩展方法Vue.set和Vue.delete。
由于JavaScript的限制，Vue无法检测到阵列的以下更改：
使用索引直接设置项目时的
- ，例如
vm.items[0] = {};
修改数组长度时的
- ，例如
vm.items.length = 0.
https://vuejs.org/api/#Vue-set
在common gotchas中也提到了这个问题
当您通过直接设置索引(例如arr = val)或修改数组的
属性来修改数组时。类似地，Vue.js无法获取这些更改。始终使用Array实例方法修改数组，或者完全替换它。
提供了一个方便的方法arr.$set(索引，值)，它只是arr.splice(索引，1，值)的语法糖。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38738762
复制相关文章
腾讯云开发者
