Используйте @input или @change на входе со значением вычисляемого свойства

Question

Я пытаюсь настроить компонент, который передает вычисленное свойство обратно родителю через v-модель.
Это объясняется с использованием прямого значения ввода, а не вычисляемого свойства, в документах наhttps://vuejs.org/v2/guide/components.html#_carbonads_projs

Пока у меня есть базовая функциональность, работающая в соответствии с документами, но теперь я хочу установить значение ввода, которое генерирует событие / отправляет данные родителю, чтобы оно быловычисляемое свойство.Я могу установить значение для вычисляемого свойства, это не проблема, но событие никогда не запускается (смотрите в vue dev tools)

Работает нижеприведенное, генерируя событие с тем, что было набрано во вводе, и обновляясоответствующие данные о родительском элементе

<input type="text" v-bind:value="value" v-on:change="$emit('input', $event.target.value)">

//parent call to component
<time-picker v-model="parentData"></time-picker>

Если я настрою таким образом, однако, и вызову изменение в computedProp, изменив какой-либо другой вход, событие не будет запущено, хотя я вижу значение изменения входа.(Я также пытался вызвать пользовательский метод вместо генерации события, но метод также не запускается)

<input type="text" v-bind:value="computedProp" v-on:change="$emit('input', $event.target.computedProp)">

Я также пытался использовать v-модель вместо v-bind: value, но все еще нет события

<input type="text" v-model="computedProp" v-on:change="$emit('input', $event.target.value)">

Однако, если я набираю непосредственно на входе, который имеет v-bind:value="computedProp", событие генерируется (хотя и без правильных данных)

Это заставляет меня подозревать, что@input и @change не запускаются при обновлении вычисляемого свойства, даже если это вызывает изменение значения указанного ввода.Есть ли альтернатива @change или @input, которую я должен использовать для мониторинга вычисляемого свойства?

В идеале я не хочу, чтобы в дочернем событии генерировалось событие, а затем вручную перехватывалось его и присваивались данные.в родительском, поскольку компонент будет использоваться несколько раз в одном и том же родительском объекте, и будет гораздо удобнее использовать v-модель непосредственно в каждом экземпляре.

В качестве альтернативы, я полностью лаю не на том дереве,и есть ли другой / лучший способ передать вычисляемое свойство v-модели, указанной при вызове компонента?

Большое спасибо:)

Answer 1

input и change прослушиватель событий отправляется пользователем, когда ввод вводится. Изменение значения программно не вызовет событие.

Существует способ программно вызвать событие . Но я хотел бы предложить вам использовать Vue watcher . Это намного чище и проще.

Это так просто, как это

  watch: {
    computedProp(newValue) {
      this.$emit("input", newValue);
    }
  }

Это означает, что Vue будет следить за значением computedProp, поэтому при каждом изменении его значения будет выполняться this.$emit("input", newValue);. Что ты хочешь.