admin管理员组文章数量:1317572
I currently use Vue.JS 2.0 and I want to update the model off one Vue instance from an custom directive, but im looking a nice way to do it, this is because i trying to create an custom directive that implement JQueryUI-Datepicker the code is the follow:
<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: ''
}
}
});
Someone know how to update pop.app.date in a dynamic way from the directive, i know that binding.expression return in this example app.date and date return the current date picked in the datepicker but i dont know how to update the model from the directive
I currently use Vue.JS 2.0 and I want to update the model off one Vue instance from an custom directive, but im looking a nice way to do it, this is because i trying to create an custom directive that implement JQueryUI-Datepicker the code is the follow:
<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: ''
}
}
});
Someone know how to update pop.app.date in a dynamic way from the directive, i know that binding.expression return in this example app.date and date return the current date picked in the datepicker but i dont know how to update the model from the directive
Share Improve this question edited Oct 29, 2016 at 3:27 David Arreola asked Oct 12, 2016 at 22:10 David ArreolaDavid Arreola 1432 silver badges6 bronze badges 3- 1 Did you manage to find a solution @bal? – Chris Edwards Commented Nov 10, 2016 at 17:50
- @chrisEdwards yes – David Arreola Commented Mar 7, 2017 at 22:36
- can you elaborate please? – Chris Edwards Commented Mar 8, 2017 at 10:12
2 Answers
Reset to default 5This will do the trick:
// 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);
}
});
},
Reference: https://stackoverflow./a/10934946/2938326
Just to follow up on @Kamal Khan's answer (which works great).
I have just done the following and got it to work (below). This removes finding the object and relies on Vue's set functionality to set the value.
bind: function (el, binding, vnode) {
$(el).datepicker({
onSelect: function (date) {
Vue.set(vnode.context, binding.expression, date);
}
});
},
My full directive is:
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) {
}
});
I can then call this in the template or html with:
<input v-model="dtime" v-datepicker="dtime">
with dtime being my data model value.
Hope this helps somebody else as this drove me nuts.
本文标签: javascriptupdate model from custom directive VueJSStack Overflow
版权声明:本文标题:javascript - update model from custom directive VueJS - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742008053a2412362.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论