通过 JS/某些插件更新值时 vue js v-model 中的反应性

Question

我目前在理解 VueJS 的 v-model 反应性如何工作方面遇到一些困难。

我有一个选择插件可以帮助我设置选择字段的样式，但它当然可以通过JS更改选择字段值，问题是它永远不会触发v-model来更新其值，如果我尝试

document.getElementById('field').value = 'whatever'

，也会发生同样的情况，如果我这样做，v-model 将不会更新，只有当我直接在字段中键入或单击真正的选择字段时，它才会更新。

正如我所读到的，Vue 似乎只监听

input

事件来触发其反应性，当我简单地用 JS 更改字段的值时，事件不会被触发，但不会更新变量的值。

我真的需要更深入地了解这一点，并在下次发生此类问题时找到处理此类问题的最佳方法。在这种情况下，我无法控制插件的事件，最好的解决方案是什么？当值动态更改时，如何让 Vue 监听并且不再出现此问题？

感谢您的帮助！

Answer 1

您的输入组件必须将事件发送回外部，以使其更新与该组件关联的

v-model

的值。

如果您无法确定输入值是否已更改，您可能还需要检查

watchers

我希望这有帮助。

Answer 2

如果您想以编程方式修改

<input>

值后触发 Vue 反应性，您基本上有两个选择：

选项 1. 重写非 Vue 代码以使用 Vue 的数据对象。

例如，创建Vue实例时，将其保存到全局var

window.vueapp = Vue.createApp({ 
    //blah blah
});

//and then
window.vueapp.PropertyX = "whatever";

选项2.修改值后，触发

change

DOM事件。

$('#textBox').val('Some text')[0].dispatchEvent(new Event('input'));

这就是该行中发生的事情：您获取输入的 jQuery 对象，然后获取

[0]

，它为您提供纯 DOM 元素（不是 jQuery 对象），然后触发浏览器的

change

事件。

附注有时，您需要触发

change

事件，而不是触发

input

。文本框需要

input

。选择框和复选框需要

change

。

P.P.S。我知道这很令人困惑，但是，是的，就是这样。