Можно ли вызвать watch() для входной ссылки в Vue 3, чтобы посмотреть атрибут значения ввода?
Я знаю, что мы можем использовать директиву v-model для элемента <input> и использовать watch() для запуска функции при изменении состояния атрибута <input> элемента value.
Однако я пытаюсь смотреть <input>ref. Когда я это делаю, функция наблюдателя выполняется, когда элемент монтируется в DOM, но не срабатывает при изменении атрибута <input>value.
Я делаю что-то неправильно?
<script setup>
import { ref, watch, watchEffect } from 'vue'
const refA = ref(null)
watch(refA, () => {
console.info('refA changed')
console.info(refA)
console.info(refA.value)
console.info(refA.value.value)
}, { deep: true })
</script>
<template>
<input ref = "refA" type = "text" value = "test" /> <br />
</template>
Ответы 2
Я не уверен, чего вы пытаетесь достичь. если вам не нужно использовать v-model, вы должны использовать v-bind и сгенерировать событие ввода, как показано ниже.
<template>
<input :value = "refA" type = "text" @input = "refA = $event.target.value" /> <br />
</template>
Это будет запускать просмотр при каждом обновлении вашего ввода.
Ссылку на шаблон, которую вы использовали как часть своего примера, нельзя использовать для просмотра внутреннего значения компонента. См. ниже ветку комментариев относительно того же.
@MoritzRingler верно, мой плохой ... теперь я вспоминаю, что время от времени использовал это для элементов формы ..
В вашем обновленном ответе также есть некоторые проблемы. Шаблон ref используется для создания ссылки на элемент шаблона (в данном случае элемент ввода), но вы заменяете его входным значением, что не имеет смысла.
@IgorMoraru Я согласен, что это не то, что я бы сделал, но, согласно заданному вопросу, есть ли другой способ посмотреть значение ссылки в соответствии с запросом?
@thezohaan, вы можете посмотреть значение ref, как это сделал ОП. но вы не можете наблюдать за внутренним состоянием компонента через шаблон ref, потому что это потребует, чтобы ref был реактивным, что не предусмотрено дизайном
Насколько я знаю, ссылки на шаблоны можно просматривать, но они срабатывают только при изменении .value - это значение ссылки, то есть элемент HTML, а не значение элемента ввода HTML. Это согласуется с тем, что вы описываете: наблюдатель стреляет один раз в гору и больше никогда. Кроме того, невозможно глубоко просмотреть HTML-элемент.
Меня восхищает то, как разные ссылки на шаблоны и данные ощущались во Vue 2, когда, по-видимому, механизм на стороне скрипта всегда был одним и тем же, что теперь стало очевидным в API композиции Vue 3. Но они по-прежнему делают разные вещи: один дает доступ к элементу HTML или экземпляру компонента Vue, а другой сохраняет значение. Я предполагаю, что большая разница заключается в использовании ref в атрибуте ref, а не в том, как он объявлен.
В любом случае, если вы хотите привязаться к значению ввода, используйте v-model (или v-bind:modelValue и @update:modelValue), но если вам по какой-то причине нужен доступ к узлу, используйте ref=. Если вы хотите сделать и то, и другое, вам нужно использовать оба, невозможно использовать только ссылку на шаблон.
Нельзя наблюдать за свойствами элемента DOM, используя ссылку на элемент в качестве источника для наблюдателя. Элементы DOM явно пропускаются, когда наблюдатель пересекает источник. github.com/vuejs/core/commit/…
Взгляните на Ссылки на шаблоны