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

【问题标题】：Vue.js - v-model binding a hidden inputVue.js - v-model 绑定一个隐藏的输入
【发布时间】：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

标签： jquery vue.js vuejs2 vue-component jquery-events

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：