Внешние манипуляции с полями Vue - PullRequest
Новая
       14

Внешние манипуляции с полями Vue

0 голосов
/ 06 марта 2019

Я хочу использовать пользовательский Javascript для взаимодействия с полями формы, связанными с каркасом Vue.Форма появляется на странице поиска темы WordPress (https://wilcity.com/search-without-map/)

  1. Автоматический выбор значения региона (это можно выполнить с помощью JS ниже) 
markerCityName = "Atlanta";
for (i = 0; i < document.getElementsByClassName("wilcity-select-2 select2-hidden-accessible")[0].options.length; i++) {

  if (document.getElementsByClassName("wilcity-select-2 select2-hidden-accessible")[0].options[i].innerText == markerCityName) {
    document.getElementsByClassName("wilcity-select-2 select2-hidden-accessible")[0].selectedIndex =
      document.getElementsByClassName("wilcity-select-2 select2-hidden-accessible")[0].options[i].index;

    triggerEvent(document.getElementsByClassName("select2-selection select2-selection--single")[0], 'focus');
    triggerEvent(document.getElementsByClassName("select2-selection select2-selection--single")[0], 'keydown');
    triggerEvent(document.getElementsByClassName("wilcity-select-2 select2-hidden-accessible")[0], 'change');

  }
}

Выбранное значение участвует в поиске без необходимости его ручного выбора в интерфейсе формы.

(i) После запуска JavaScript и выбора «Атланта» в раскрывающемся списке регионов.(ii) Выберите любое другое поле в форме для поиска, который будет выполнен.(iii) вы заметите, что в этом поиске не учитывалось предварительно выбранное значение региона «Атланта»

Я не могу сделать (2).Автоматически выбранное значение не отправляется в сообщение при изменении значения формы, и автоматически выбранное значение не принимается.

1 Ответ

0 голосов
/ 06 марта 2019

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

Каждый корневой элемент DOM компонента Vue будет иметь присоединенное свойство __vue__, которое можно использовать для доступа и изменения внутреннего состояния компонента извне: 

// Set up a Vue component with some data in it:
Vue.component('child', {
  data() {
    return {
      foo: 'Data from inside Vue'
    }
  },
  template: '<div id="component">{{foo}}</div>'
})

new Vue({
  el: '#app',
});

// now outside Vue:
document.getElementById('component').__vue__.$data.foo = "Updated value from outside vue"
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<div id="app">
  <child></child>
  
</div>

Насколько мне известно, использование свойства __vue__ официально не поддерживается, но Автор Vue говорит, что использовать безопасно :

официальный devtool тоже полагается на него, поэтому он вряд ли изменится или сломается.

...