javascript - ventajas - actualizar el modelo de la directiva personalizada VueJS

vue js wikipedia

Question

Actualmente uso Vue.JS 2.0 y quiero actualizar el modelo de una instancia de Vue desde una directiva personalizada, pero estoy buscando una buena manera de hacerlo, esto es porque estoy tratando de crear una directiva personalizada que implemente el código de JQueryUI-Datepicker. es el siguiente:

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

Alguien sabe cómo actualizar pop.app.date de forma dinámica desde la directiva, sé que binding.expression devuelve en este ejemplo app.date y date la fecha actual elegida en el datepicker pero no sé cómo actualizar el modelo de la directiva

Answer 1

Esto hará el truco:

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

Referencia: https://.com/a/10934946/2938326