как внешне вызвать реактивность в VueJS для выпадающего меню - PullRequest
Новая
       35

как внешне вызвать реактивность в VueJS для выпадающего меню

0 голосов
/ 30 мая 2018

В одном случае мне нужно вызвать изменение в компоненте, управляемом VueJS, из-за пределов VueJS.

Я обнаружил, что могу легко сделать это с помощью флажка, вызвав или вызвав его свойство click(), но я не могу сделать то же самое с элементом input[type=text] или select.

jsfiddle здесь

Я посмотрел вVueJS документация о том, как работает реактивность, но не понимаю, как это сделать здесь.Как бы я это сделал?

1 Ответ

0 голосов
/ 30 мая 2018

Вы можете сначала сохранить экземпляр Vue в глобальной переменной (window.vueApp = new Vue({...})) и изменить значение, выполнив что-то вроде vueApp.dataValue = ...

Отредактировав свою скрипту: https://jsfiddle.net/jacobgoh101/q2zv5gz1/6/

Сохранить экземпляр Vue в глобальной переменной 

window.vueApp = new Vue({ ...

и внутри onclick: 

  <!-- totally unrelated to Vue! -->
  <button onclick="vueApp.selectValue = vueApp.selectValue === 'alpha' ? 'beta' : 'alpha' " >
   change select
  </button>
    <button onclick="vueApp.checkboxValue = !vueApp.checkboxValue" >
   change checkbox
  </button>
  <button onclick="vueApp.textValue = Math.random()">
  change input
  </button>

ОБНОВЛЕНИЕ

Если вы хотите, чтобы элементы не знали о том, как был реализован Vue, вам нужно найти способ правильно инициировать событие ввода на элементах ввода программно.

Комучтобы вызвать событие, вы можете использовать 

.dispatchEvent(new Event('eventname'));

После игры с ним: https://jsfiddle.net/jacobgoh101/q2zv5gz1/7/

change событие работает для выбора 

document.getElementById('select').dispatchEvent(new Event('change'));

inputсобытие работает для текста 

document.getElementById('text').dispatchEvent(new Event('input'));

ПРИМЕЧАНИЕ: Это, вероятно, не будет надежно работать в другом браузере.Как это пытается программно симулировать действия пользователя.Я думаю, что разные браузеры будут по-разному обрабатывать действия пользователя.

...