Question

我正在寻找使用自定义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并在区域下拉列表中选择“ Atlanta”。（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也依赖它，因此不太可能更改或破坏。

Vue文件的外部操纵

1 个答案: