VUEJS:如何为jQuery插件编写类似于V模型的指令

Question

V-Model指令仅限于input事件。但是我也希望它也支持jQuery change事件，以便我可以使用jQuery插件，例如Bootstrap-toggle，而无需编写单独的代码来操纵这些字段。

我面临的主要挑战是如何在jQuery change事件上更新绑定到元素的值。我尝试在 change事件上触发 input事件，但它不起作用。

这是我要实现的目标：

html：

<input id="dayparting_switch" v-observe="options.dayparting" v-model="options.dayparting" :cheked="options.dayparting" data-off="Disabled" data-on="Enabled" data-toggle="toggle" type="checkbox">

自定义指令：

Vue.directive('observe', {
    bind: function(el, bind, vnode) {
        $(el).is(':checkbox') ? $(el).prop('checked', !!bind.value) : $(el).val(bind.value);
        $(el).change(function() {
            var newVal = $(el).is(':checkbox') ? $(el).prop('checked') : $(el).val();
            // Here comes problem: how to set new value to options.dayparting ? 
            // 1) bind.value = newVal won't trigger any update
            // 2) this.dispatchEvent(new Event('input')) also doesn't work
            // 3) Only quirky way of doing this is to parse bind.expression to get object and keys and then use Vue.set
            var lastDot = bind.expression.lastIndexOf('.');
            var object = bind.expression.substring(0, lastDot);
            var key = bind.expression.substr(lastDot+1);
            Vue.set(eval('vnode.context.' + object), key, newVal);
        });
    }
});

上面的方法实际上对我有用，但我认为这不是一个完美的方法。例如，它对v-observe="options[option_name]"

不起作用

有什么简单或标准的方法可以实现这一目标？

Answer 1

在VUE 1中，可以编写双向绑定指令（如V-Model），但是在VUE 2中，您可以使用组件进行。

看看包装器组件示例。