Vuejs: Wie schreibe ich ähnliche Direktiven wie v-model, für jquery plugins

Question

Die v-model Direktive ist auf input event begrenzt. aber ich will, dass es jquery Events auch unterstützt, so dass ich jquery plugins wie bootstrap-toggle verwenden kann, ohne separate Codes schreiben zu müssen, um diese Felder zu manipulieren.

Die Hauptherausforderung, der ich gegenüberstehe, ist, wie man den Wert aktualisiert, der an das Element gebunden ist, auf jquery Ereignis. Ich habe versucht, input Ereignis auf 10 Ereignis ausgelöst, aber es hat nicht funktioniert. Hier

ist das, was ich versuche zu erreichen:

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"> 

Benutzerdefinierte Richtlinie:

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); 
     }); 
    } 
}); 

Die obige Methode funktioniert tatsächlich für mich, aber ich denke, es ist keine perfekte Methode. zB funktioniert es nicht für v-observe="options[option_name]"

Gibt es eine einfache oder Standardmethode, um dies zu erreichen?

Answer 1

In Vue 1 war es möglich, Zwei-Wege-Binding-Direktiven (wie V-Modell) zu schreiben, aber in Vue 2, tun Sie es mit Komponenten.

Werfen Sie einen Blick auf die Wrapper Component Example.