我目前使用 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 ,我知道在这个示例中,binging.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);
}
});
},
参考:https://stackoverflow.com/a/10934946/2938326 https://stackoverflow.com/a/10934946/2938326
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)