vue里面怎么监听数据的变化

Question

<el-form-item label="活动类型 " prop="status">
                <el-radio-group v-model="ruleForm.status" >
                    <el-radio v-for="status in acstatus" :label="status.key" :key="status.key">{{status.val}}</el-radio>
                </el-radio-group>
            </el-form-item>
我想监听elemnt 的v-model="ruleForm.status"复选框里面的获取到的状态 然后清掉里面的不相关的表单验证

这么写不对## 标题文字 ##

 this.ruleForm.status: {
        handler(newList) {
        console.log(newList)
         this.ruleForm.status = newList
         if (newList==1) {
          this.$refs.ruleForm.clearValidate('file')
         }
        },
        immediate: true
      }
    },

Answer 1

可以直接监听对象

wacth: {
    'ruleForm.status'(newVal, oldVal){
        // 变化的新值newVal
        // 旧的值oldVal
    }
}

Answer 2

根据你的提问，你可以使用vue中的名为watch的监听器，如以下代码：

 vm = new Vue({
            el: '.container-fiuled',
            data: {
                comments: "",
            },
            watch: {
              
                comments: function () {

                }
            }
        })

comments是获取用户评论。也就是说，在不刷新页面的情况下，只要用户输入了评论，前端就自动展示该评论，然后，填充到页面上。

Answer 3

computed: {
  zstatus: function () {
    return this.ruleForm.status
  }
}，
watch: {
    zstatus: function (val) {
   // 这里函数
    },
   
  }

直接用computed+watch 监听