javascript - plugin - vuejs wrapper



從自定義指令VueJS更新模型 (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

我目前使用Vue.JS 2.0,我想從一個自定義指令更新一個Vue實例的模型,但即時通訊尋找一個很好的方式來做到這一點,這是因為我試圖創建一個自定義指令,實現JQueryUI-Datepicker的代碼是如下:

<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返回在這個例子中的應用程序日期和日期返回日期選擇器中選擇的當前日期,但我不知道如何更新模型從指令





vuejs2