VUE中如何监听对象的属性变化
需要做两个选择器的级联操作,根据当前阶段显示不同的当前状态,我的第一思路是用到VUE的计算属性computedcomputed:{statusOptions:function () {let me = this;let stage = project.currentStage;let url = "./svc/dict/...
·
需要做两个选择器的级联操作,根据当前阶段显示不同的当前状态,我的第一思路是用到VUE的计算属性computed
computed:{
statusOptions:function () {
let me = this;
let stage = project.currentStage;
let url = "./svc/dict/project?currentStage=" + stage;
me.$http.get(url).then(res => {
return res.data.status;
})
}
},
结果发现在project.currentStage值发生变化的时候,异步请求可以请求成功并返回options,但是statusOptions并不能取到这个值,百度了一下原因比较多的说法是computed是计算属性,需要根据计算马上获取到值,所以不能用异步请求。所以我又想到了用watch属性监听。
因为第一个选择器中的v-model绑定的peoject对象的currentStage属性,所以就直接监听的属性值,但是这样的写法是不允许的
百度了一下怎么监听对象下的属性,最后的解决方法有两个:1.用computed做中间层 2.用' '把监听对象包起来,第二种比较简洁,于是就采取了第二种方式
watch: {
'project.currentStage': function (val) {
let me = this;
let stage = val;
let url = "./svc/dict/project?currentStage=" + stage;
me.$http.get(url).then(res => {
me.statusOptions = res.data.status;
})
}
},
然后测试一下果然可以了
更多推荐
已为社区贡献2条内容
所有评论(0)