Как использовать часы Vue для наблюдения значения элемента формы? - PullRequest
Новая
       47

Как использовать часы Vue для наблюдения значения элемента формы?

0 голосов
/ 01 марта 2019 
<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)
}

1 Ответ

0 голосов
/ 01 марта 2019

Чтобы наблюдать за изменениями данных , используя watch объект , добавьте к этому объекту функцию с именем, соответствующим свойству данных для просмотра.Например, чтобы просмотреть свойство данных с именем "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

...