我目前使用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在这个例子中返回app.date和date返回在datepicker中选择的当前日期,但我不知道如何从指令
更新模型答案 0 :(得分:5)
这样可以解决问题:
// 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);
}
});
},
答案 1 :(得分:0)
只需跟进@Kamal Khan的回答即可(效果很好)。
我刚刚完成以下工作,并使其起作用(如下)。这样就无需寻找对象,而是依靠Vue的set功能来设置值。
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为我的数据模型值。
希望这对其他人有所帮助,这使我发疯。