如何在VueJS外部触发下拉菜单等组件的响应式更新？

你遇到的情况很典型：checkbox的click()方法能触发Vue的响应，是因为点击复选框会自动触发change事件，而Vue正好监听了这个事件来更新数据。但文本框（input[type=text]）和下拉框（select）就不一样了——直接修改它们的value或者调用click()并不会自动触发Vue监听的事件，所以Vue没法感知到变化。

下面是针对不同元素的具体解决方案：

一、处理input[type=text] #

要让Vue感知到文本框的变化，你需要先修改DOM元素的value，再手动触发input事件（Vue对文本输入类元素默认监听的是input事件）。示例代码：

// 获取文本框元素
const textInput = document.getElementById('your-text-input');
// 设置新值
textInput.value = '外部触发的新内容';
// 手动触发input事件
textInput.dispatchEvent(new Event('input'));

二、处理select元素 #

下拉框的话，Vue监听的是change事件，所以步骤是修改选中状态，再触发change事件：

// 获取下拉框元素
const selectElem = document.getElementById('your-select');
// 方式1：通过selectedIndex设置选中项
selectElem.selectedIndex = 2; // 选中第三个选项（索引从0开始）
// 方式2：直接设置对应option的selected属性
// selectElem.querySelector('option[value="target-value"]').selected = true;
// 手动触发change事件
selectElem.dispatchEvent(new Event('change'));

补充说明 #

为什么checkbox的click()能生效？因为点击复选框时，浏览器会自动触发change事件，而Vue已经监听了这个事件，所以数据会同步更新。而文本框和下拉框的手动DOM操作不会自动触发对应的监听事件，必须我们手动派发事件来通知Vue。

如果你的场景更复杂，也可以考虑直接操作Vue实例的data（比如vm.$data.yourProperty = '新值'），但如果是完全从Vue外部（比如第三方脚本）触发，上面的DOM事件触发方式是最通用的。

内容的提问来源于stack exchange，提问作者Oliver Williams