Question

有了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没有被调用？

Answer 1

从我的角度来看，对于组件之间的通信，最好使用：

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

@change不适用于您的情况

Answer 2

在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);

VueJS <input />值更改未调用@change

2 个答案: