Vuejs：v-modelに似たディレクティブをjqueryプラグインに書き込む方法

Question

v-modelディレクティブはinputイベントに制限されています。しかし、jquery changeイベントもサポートしたいので、bootstrap-toggleのようなjqueryプラグインを使用すると、これらのフィールドを操作する別々のコードを書く必要はありません。

私が直面している主な課題は、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ではコンポーネントで行います。

Wrapper Component Exampleをご覧ください。