Update-Modell von benutzerdefinierten Richtlinie VueJS

Question

Ich verwende derzeit Vue.JS 2.0 und ich möchte das Modell aus einer Vue-Instanz von einer benutzerdefinierten Anweisung aktualisieren, aber ich suche eine nette Möglichkeit, dies zu tun, ist dies, weil ich versuche, ein zu erstellen benutzerdefinierte Richtlinie, die jQueryUI-Datepicker des Code ist der Nachfolger implementieren:

<input type="text" v-datepicker="app.date" readonly="readonly"/> 

Vue.directive('datepicker', { 
    bind: function (el, binding) { 
    $(el).datepicker({ 
     onSelect: function (date) { 
     //this is executed every time i choose an date from datepicker 
     //pop.app.date = date; //this work find but is not dynamic to parent and is very dirty 
     Vue.set(pop, binding.expression, date); //this should work but nop 
     } 
    }); 
    }, 
    update: function (el, binding) { 
    $(el).datepicker('setDate', binding.value); 
    } 
}); 

var pop = new Vue({ 
    el: '#popApp', 
    data: { 
     app: { 
      date: '' 
     } 
    } 
}); 

Jemand weiß, wie zu aktualisieren pop.app.date in einer dynamischen Art und Weise aus der Richtlinie, weiß ich, dass binding.expression Rückkehr in diesem Beispiel App. Datum und Datum geben das aktuelle Datum zurück, das im Datepicker ausgewählt wurde, aber ich weiß nicht, wie man das Modell von der Direktive aktualisiert

Answer 1

Dies wird den Trick machen:

// vnode (third argument is required). 
bind: function (el, binding, vnode) { 
    $(el).datepicker({ 
     onSelect: function (date) { 
      // Set value on the binding expression. 
      // Here we set the date (see last argument). 
      (function set(obj, str, val) { 
       str = str.split('.'); 
       while (str.length > 1) { 
        obj = obj[str.shift()]; 
       } 
       return obj[str.shift()] = val; 
      })(vnode.context, binding.expression, date); 
     } 
    }); 
}, 

Referenz: https://stackoverflow.com/a/10934946/2938326