VUE中如何监听对象的属性变化

最新推荐文章于 2025-06-21 21:23:50 发布

GechangLiu

最新推荐文章于 2025-06-21 21:23:50 发布

阅读量9.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/GechangLiu/article/details/89946702

VUE 专栏收录该内容

3 篇文章

订阅专栏

博客讲述了做两个选择器级联操作时，根据当前阶段显示不同状态的问题。最初想用VUE计算属性computed，但因异步请求问题失败。后尝试用watch属性监听，经探索找到两种监听对象属性的方法，最终采用简洁的方式解决问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要做两个选择器的级联操作，根据当前阶段显示不同的当前状态，我的第一思路是用到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;
        })
      }
    },

然后测试一下果然可以了