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

<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)
}

vue.js vuejs2 vue-component watch element-ui
person wangzewei    schedule 01.03.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

демонстрация

person tony19    schedule 01.03.2019
comment
Пробовал вот так: timeRange: function(val) { console.log(val) }, тоже не вышло. @ Tony19 - person wangzewei; 01.03.2019
comment
Хм. Можете ли вы предоставить больше контекста для воспроизведения проблемы? Как объявляется свойство timeRange? - person tony19; 01.03.2019
comment
data() { return { SearchForm: { searchWord: '', timeRange: '' }, isShowDatepicker: false, searchType: 'all', timeRange: '' }; вся форма объявляется, как в приведенном выше коде. А функция в часах выглядит так timeRange: function(val) { console.log(val) } - person wangzewei; 01.03.2019
comment
См. Обновленный ответ для демонстрации. Если ваш вариант использования отличается, было бы полезно увидеть код, воспроизводящий проблему. - person tony19; 01.03.2019
comment
Хорошо, я думал, что мой вопрос был решен, большое спасибо ~ Кстати, codepen - действительно полезный инструмент для программистов, - person wangzewei; 01.03.2019
comment
@wangzewei Нет проблем :) Я рад, что Codepen вам помог. Также есть Codesandbox (который отлично подходит для демонстраций SFC). Я настоятельно рекомендую использовать их для репродукций в ваших следующих вопросах. Удачного кодирования! - person tony19; 01.03.2019
comment
Хорошо, я попробую позже, и я так люблю ~, в котором я мог выучить столько всего программирования. И счастливого программирования тоже, я полагаю, что буду счастливым программистом ~ - person wangzewei; 01.03.2019