vue需要同时监听两个变量怎么做

最新推荐文章于 2024-12-14 15:14:33 发布

白马？定叫他有来无回！

最新推荐文章于 2024-12-14 15:14:33 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：学习vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_33138785/article/details/122129234

学习vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍在Vue中通过两种不同方式监听变量变化的方法：第一种是合并变量并监听合并后的变量；第二种是分别监听两个变量，并将变化后的操作提取到一个单独的函数中。

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

第一种方法：先将两个变量合并，然后监听合并之后的变量

watch: {
    mergeVariable(val) { //新增子节点或者修改节点
      if(val.dialogStatus == 'child'){ //新增子节点
        this.restForm()
        this.form.pid = val.detailData.id
        this.viewModal = false
      }else if(val.dialogStatus == 'edit'){//修改节点
        this.form = val.detailData
        this.viewModal = false
      }else if(val.dialogStatus == 'view'){//查看
        this.form = val.detailData
        this.viewModal = true
      }else if(val.dialogStatus == 'add') { //新增根节点
        this.viewModal = false
      }
    }
  },
  computed: {
    mergeVariable() {
      const { dialogStatus, detailData } = this
      return {
        dialogStatus,
        detailData,
      }
    },
  },

第二种方法：分别监听两种变量，但是将变化之后的操作提取成一个函数，放在methods中

watch: {
    dialogStatus(){
      this.operatePanel()
    },
    'detailData.yztTreeEntity.id'(){
      this.operatePanel()
    },
    
  },
methods: { 
    operatePanel() {
        //操作
    }
},