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

Question

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

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

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

据我了解，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>