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

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

1 个答案: