更新模型自定义指令VueJS

Question

我目前使用Vue.JS 2.0，我想从一个自定义指令更新一个Vue实例的模型，但即时通讯寻找一个很好的方式来做到这一点，这是因为我试图创建一个实现jQueryUI的，日期选择器的代码定制指令是如下：

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

有人知道如何从指令以动态的方式更新pop.app.date，我知道在这个例子中的应用程序，binding.expression回报。日期和日期返回datepicker中选择的当前日期，但我不知道如何从指令更新模型

Answer 1

这将做到这一点：

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

参考：https://stackoverflow.com/a/10934946/2938326