sharomet
@sharomet
Front-End

Почему не работают стандартные методы когда input меняется извне?

Все привет.
Я использую vue 3
У меня в компоненте есть кнопка которая вызывает всплывающее окно с iframe. В iframe тоже есть кнопка по нажатию на которую, скрипт передаёт данные в мой компонент, а точнее в input. Если навесить на этот input стандартные вьюшные события, то они не видят изменений. Изменить скрипт в iframe невозможно.
template: `
<div>
  <input type="text" name="dirs" id="dirs" v-model="dirs" @change="checkDirs">
  <button>Открыть модальное окно</button>
</div>
`
data() {
  return {
    dirs: ''
  }
},
watch: {
  dirs(val) {
    console.log(val) // ничего не происходит
  }
},
methods: {
  checkDirs() {
    console.log('Done') // ничего не происходит
  }
}


Можно ли это как-то исправить?
Спасибо
  • Вопрос задан
  • 78 просмотров
Решения вопроса 1
Aetae
@Aetae
Тлен
Это никак не связано с Vue. Изменения value через javascript не вызывают никаких событий. Нет событий - нет реакции. Умные скрипты, рассчитанные на работу в связке с другими вручную вызывают события input\change после изменения. Ваш скрипт в iframe, надо полагать, не умный.

Если нет доступа к скрипту во фрейме, решение только костыль: следить вручную за вводом и вызывать нужные события, например так:
<input ... ref="input">
mounted() {
  const valueDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
  Object.defineProperty(this.$refs.input, 'value', {
    ...valueDescriptor, 
    set(value) {
      valueDescriptor.set.call(this, value);  
      this.dispatchEvent(new Event('input', {
        bubbles: true,
        cancelable: true,
      }));
    } 
  })
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы