VueJS <input> 值更改不调用@change答案

【问题标题】：VueJS <input> value change not calling @changeVueJS <input> 值更改不调用@change
【发布时间】：2019-09-10 15:04:07
【问题描述】：

使用 VueJS，我有两个独立的组件。

模态和表单。

在模态表单中，用户输入一个 PIN 得到确认，然后将该值设置为表单中的输入标签，以基本上保存该值。

在模态组件中，我简单地设置值是这样的：

document.getElementById('pin').value = this.pin_input;

在表单组件中，输入标签是这样的：

<input type="hidden" @change="submit()" id="pin">

在控制台中，此输入标记的值设置正确，但值更改时不会调用 @change="submit()"。

在未被调用的表单组件中提交方法代码：

methods : {
   submit : function(){
       console.log("SUBMIT HERE");
   }    
}

为什么我的输入标签的@change 没有被调用？

【问题讨论】：

这不是一个正确的实现。您应该遵守 vue js 模型和数据属性。
您不应该使用 DOM 操作来设置值，因为 Vue 不会监视 DOM 更改（只有它自己的虚拟 DOM），因此它们会被完全忽略并在下一次更新滴答时被覆盖。您的问题可能可以解决，但您需要共享组件的代码。
@dziraf 好的，谢谢，我不知道。谢谢

标签： javascript vue.js

【解决方案1】：

在 DOM 元素上设置值不会触发输入/更改事件。这就是为什么你在 vue 中设置的事件监听器没有被调用。

您可以手动触发这些事件，然后它们将被 vue 拾取。

var element = document.getElementById('pin');
element.value = this.pin_input;
// Works in most modern browsers.
var event = new Event('change');
element.dispatchEvent(event);

【讨论】：

【解决方案2】：

在我看来，组件之间的通信最好使用：

一些状态管理，比如 Vues https://vuex.vuejs.org/，并将输入值保存在单独的存储中或
尝试使用自定义方法https://vuejs.org/v2/guide/components-custom-events.html
使用父组件并将回调传递给子组件。

@change 不适用于您的情况

【讨论】：