Vue.js - v-model 绑定一个隐藏的输入

Posted 2023-02-23

【中文标题】Vue.js - v-model 绑定一个隐藏的输入

【英文标题】：Vue.js - v-model binding a hidden input

【发布时间】：2018-05-12 12:55:55

【问题描述】：

我有以下隐藏输入：

 <input id="myHiddenInput" 
    name="myHiddenInput" 
    type="hidden" 
    v-model="comment.myHiddenInput" 
    v-on:change="comment.myHiddenInput=$event.target.value">

var app = new Vue(
   el: '#app',
   data: 
     comment: 'myHiddenInput': ''
   
)

在我的 javascript 函数中，我设置隐藏值并触发更改事件，如下所示：

var myFunction = function () 

   $('#myHiddenInput').val(JSON.stringify(hiddentStuff)).trigger('change');

;

但是上述方法不起作用，即双向绑定不起作用。

但如果我这样做，它会起作用：

var myFunction = function () 

   $('#myHiddenInput').val(JSON.stringify(hiddentStuff)).trigger('change');
   document.getElementById('myHiddenInput').dispatchEvent(new Event('change'));

;

为什么.trigger('change') 本身不够用，为什么还要打电话给dispatchEvent(new Event('change'))？

【问题讨论】：

因为 jQuery 使用它自己的事件系统，而 Vue 使用 DOM 事件。并且如上一个问题所述，直接使用app设置值会更好。 codepen.io/Kradek/pen/pdxWzg?editors=1010

【参考方案1】：

当你使用 jquery 和 vue.js 时，你可以在 Js 中使用本地浏览器变量

【参考方案2】：

我建议不要以这种方式将 jquery 与 Vue 一起使用。

尝试用 vue 的方式改变绑定的对象：

this.comment.myHiddenInput = JSON.stringify(hiddentStuff); //Your new value here

这将自动更新输入并触发更改。