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

Есть случай, когда мне нужно инициировать изменение компонента, управляемого VueJS, извне VueJS.

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

Jsfiddle находится здесь

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


vue.js vue-reactivity
person Oliver Williams    schedule 30.05.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете сначала сохранить экземпляр 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'));

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

person Jacob Goh    schedule 30.05.2018
comment
Да, это работает, и я знал об этом, но это кажется глупым. Очень забавно, что я могу сделать это с помощью флажка, и он регистрируется с помощью механизма реактивности VueJSs, но я не могу сделать это с помощью текста или выбора. Ваш метод означает, что мне нужно кое-что знать о том, как был реализован Vue :) - person Oliver Williams; 30.05.2018
comment
@OliverWilliams добавил еще одно решение. но я не думаю, что это надежно. только мои 2 цента - person Jacob Goh; 30.05.2018