Question

我有以下隐藏的输入：

function rgbToHsl(r, g, b) {
    r /= 255, g /= 255, b /= 255;

    var max = Math.max(r, g, b);
    var min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if (max == min) {
        h = s = 0; // achromatic
    } else {
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max) {
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }

    return 'hsl(' + Math.floor(h * 360) + ',' + Math.floor(s * 100) + '%,' + Math.floor(l * 100) + '%)';

}

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

 <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': ''}
   }
})

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

但如果我这样做，那就有效：

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')？

Answer 1

我建议不要与Vue一起使用jquery。

尝试以vue方式更改绑定对象：

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

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

Answer 2

使用jquery和vue.js时，可以将本地浏览器变量与Js一起使用

Vue.js - 绑定隐藏输入的v模型

2 个答案: