Vue 字段的外部操作答案

【问题标题】：External manipulation of Vue fileldsVue 字段的外部操作
【发布时间】：2019-03-06 20:03:36
【问题描述】：

我希望使用自定义 Javascript 与与 Vue 框架绑定的表单字段进行交互。表单出现在 WordPress 主题搜索页面 (https://wilcity.com/search-without-map/)

自动选择区域值（我可以使用下面的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)。当表单值发生变化时，自动选择的值不会在 post 中发送，并且自动选择的值不会被拾取。

【问题讨论】：

您能否阐明“所选值参与搜索而无需从表单界面手动选择”是什么意思？我不清楚你的意图是什么。
对于在我的 Chrome 浏览器中截取的代码来说，格式是个问题。我试图正确格式化它以提高可读性。
stackoverflow.com/editing-help#comment-formatting
@DanielBeck，我添加了 (2) 的详细信息
@DanielBeck 是这样想的。我只看了几眼就注意到了。

标签： javascript vue.js vue-component interaction

【解决方案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：

官方的开发工具也依赖它，所以它不太可能改变或破坏。

【讨论】：

谢谢。让我试试这个。