Javascript VueJS<；输入>；值更改不调用@change

对于VueJS，我有两个独立的组件

情态和形式

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

在模态组件中，我简单地如下设置值：

document.getElementById（'pin'）.value=this.pin\u输入

在表单组件中，输入标记如下所示：


在控制台中，此输入标记get的值设置正确，但值更改时不会调用
@change=“submit（）”

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

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

为什么我的输入标签的
@change
没有被调用？
在我看来，对于组件之间的通信，最好使用：

一些状态管理，如VUE，并将输入值保存在单独的存储中
或
尝试使用自定义方法

使用父组件并将回调传递给子组件

@更改在您的情况下不起作用
在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);

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