Question

我需要使用Vue.js逐步增强现有的服务器端呈现形式。我需要根据表单上另一个字段的值来更改<select>的{{1}}。

正如我所见，由于丢失了我所有需要维护的服务器端渲染内容，因此无法在父<options>（或另一个父元素）上安装Vue。

我已经安装在希望动态化的<form>上。这使我可以动态生成<select>，但我希望如此。但是，另一个表单输入元素（已安装的<option>的同级元素）现在不在我的Vue范围内。怎样才能通知我的Vue应用程序有关依赖字段的更改，以便它可以相应地更新我的<select>？

据我了解，Vue有自己的事件系统，因此我将不得不自己连接DOM事件监听器-完全可以。就我所知。

此外：我了解在无限的时间，金钱和资源的情况下，我应该遵循使我的整个用户体验成为SPA的趋势，它将以火箭发射器到锤子钉的方式解决此问题当然。但是，这不是一个选择。我必须逐步增强SSR的输出。

Answer 1

您仍然可以使用document.querySelector()在文档中查询同级元素，并在Vue实例中调用addEventListener()：

const ALL_DATA = [
  {id: 1, value: 1, text: 'One'},
  {id: 2, value: 2, text: 'Two'},
  {id: 3, value: 3, text: 'Three'},
];

new Vue({
  el: '#app',
  data: () => ({
    options: [
      ...ALL_DATA,
    ]
  }),
  mounted() {
    document.querySelector('#option-type').addEventListener('change', e => {
      switch (e.target.value) {
        case 'even':
          this.options = ALL_DATA.filter(x => x.value % 2 === 0);
          break;

        case 'odd':
        default:
          this.options = ALL_DATA.filter(x => x.value % 2 !== 0);
          break;
      }
    })
  }
});

document.getElementById('myForm').addEventListener('submit', e => {
  e.stopPropagation();
  e.preventDefault();
});

<script src="https://unpkg.com/vue@2.5.17"></script>

<form action="#" id="myForm">

  <fieldset id="option-type">
    <label>Even
      <input name="option-type" type="radio" value="even">
    </label>
    <label>Odd
      <input name="option-type" type="radio" value="odd">
    </label>
  </fieldset>

  <select name="option" id="app">
    <option v-for="o in options"
            value="o.value"
            :key="o.id">{{o.text}}</option>
  </select>
</form>

使用Vue监听应用外部的DOM事件

1 个答案: