Javascript 从自定义指令VueJS更新模型

我目前使用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: ''
        }
    }
});

Vue.指令（'datepicker'{
绑定：函数（el，绑定）{
$（el）.日期选择器({
onSelect：功能（日期）{
//每次我从datepicker中选择日期时都会执行此操作
//pop.app.date=date；//此工作无法找到，但对父级来说不是动态的，而且非常脏
set（pop，binding.expression，date）；//这应该可以工作，但是没有
}
});
},
更新：功能（el，绑定）{
$（el）.datepicker（'setDate'，binding.value）；
}
});
var pop=新的Vue({
el:“#popApp”，
数据：{
应用程序：{
日期：''
}
}
});

---

有人知道如何从指令中动态更新pop.app.date，我知道binding.expression返回在本例中app.date和date返回在日期选择器中选择的当前日期，但我不知道如何从指令更新模型这将实现以下目的：

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

---

参考资料：

只是跟进@Kamal Khan的答案（效果很好）

我刚刚做了以下工作，并使其发挥作用（见下文）。这将删除对对象的查找，并依赖Vue的设置功能来设置值

bind: function (el, binding, vnode) {
    $(el).datepicker({
        onSelect: function (date) {
             Vue.set(vnode.context, binding.expression, date);
         }
    });
},

我的全部指示是：

  Vue.directive("datepicker",{
    bind(el,binding, vnode) {
       console.log(binding);
       var self = el
      $(self).datepicker({
        dateFormat:'mm-dd-yy',
        onSelect: function (date) {
            Vue.set(vnode.context, binding.expression, date);
        }
    });      
    },
    updated: function (el,binding) {
    }
 });  

然后，我可以在模板或html中使用以下命令调用此命令：

 <input v-model="dtime" v-datepicker="dtime"> 

以dtime作为我的数据模型值

---

希望这能帮助其他人，因为这让我发疯。

你找到解决方案了吗@bal？@chrisewards是的，请详细说明一下？自调用函数通过在点上拆分并循环，动态遍历点符号（例如app.date），直到我们到达所需的键（示例中的日期）然后根据您作为最后一个参数提供的值设置其值。当我在版本2.5.16上尝试此操作时，我收到一个Vue警告，但不起作用“避免在运行时向Vue实例或其根$data添加反应性属性-在数据选项中预先声明它。”。我的第一个实现就像@Kamal Khan的do it，我最后包装在一个组件中并发出value@DavidArreola你能分享一下你在密码笔或类似的东西上所做的事情吗？