时间戳

首页 > 解决方案 > VueJS值更改不调用@change

javascript - VueJS值更改不调用@change

问题描述

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

模态和形式。

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

在模态组件中，我将值设置为：

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

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

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

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

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

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

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

标签： javascriptvue.js

解决方案

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

推荐阅读