如何使用Vue手表观察表单项值？

Question

<el-form-item label="range"
              v-if="isShowDatepicker">
    <el-date-picker type="datetimerange" 
                                    style="width: 100%"
                                    v-model="timeRange"
                                    range-separator="to"
                                    start-placeholder="start"
                                    end-placeholder="end"></el-date-picker>
</el-form-item>

我有一个表单，有一个项目输入date和time（就像上面的代码），我想在它更改后获取值。我想用Vue watch来完成这个任务。但是，我不知道如何在watch中命名变量。我试过这个：

"SearchForm.timeRange": function (val) {
     console.log(val)
}

Answer 1

要使用watch更改watch object数据，请向该对象添加一个名称与要监视的data属性匹配的函数。例如，要观察名为"question"的数据属性，请添加以下函数：

watch: {
  question(newValue, oldValue) {
    //...
  }
}

或者，您可以使用handler函数和其他观察程序选项添加以目标数据属性命名的对象：deep和immediate。

watch: {
  question: {
    deep: true,      // detecting nested changes in objects
    immediate: true, // triggering the handler immediately with the current value
    handler(newValue, oldValue) {
      //...
    }
  }
}

---

在你使用"timeRange"的情况下，语法是：

watch: {
  timeRange(newValue) {
    //...
  }
}

demo