外部操纵值字段

Question

我希望使用自定义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');

  }
}

2. 所选值参与搜索，而无需从表单界面手动选择它。 （i）javascript运行后，在区域中选择“亚特兰大”下拉列表。 （ii）选择表格中的任何其他字段以执行搜索。 （iii）您会注意到此搜索没有考虑预选区域值“亚特兰大”

我无法做到（2）。当表格值更改时，不会在帖子中发送自动选择的值，并且不会选取自动选择的值。

Answer 1

正如您所发现的那样，直接修改DOM将无法正常工作，因为Vue不知道这些更改并且仍然基于其内部状态工作。您需要修改Vue的基础数据模型。

每个Vue组件的根DOM元素都附加了一个__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's author says it's safe to use：

官方的devtool也依赖它，因此它不太可能改变或破坏。