カスタムディレクティブVueJSからの更新モデル

Question

私は現在Vue.JS 2.0を使用しています。カスタムディレクティブから1つの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