update model from custom directive VueJS

Question

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

Did you manage to find a solution @bal?

Chris Edwards
– Chris Edwards

2016-11-10 17:50:44 +00:00
Commented Nov 10, 2016 at 17:50 — Chris Edwards
– Chris Edwards, Commented Nov 10, 2016 at 17:50
@chrisEdwards yes

David Arreola
– David Arreola

2017-03-07 22:36:55 +00:00
Commented Mar 7, 2017 at 22:36 — David Arreola
– David Arreola, Commented Mar 7, 2017 at 22:36
can you elaborate please?

Chris Edwards
– Chris Edwards

2017-03-08 10:12:02 +00:00
Commented Mar 8, 2017 at 10:12 — Chris Edwards
– Chris Edwards, Commented Mar 8, 2017 at 10:12

Community · Accepted Answer · 2017-05-23 11:53:51Z

5

This 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.com/a/10934946/2938326

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Jan 30, 2017 at 13:41

Kamal Khan

1,03612 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kamal Khan Over a year ago

The self invoking function traverses the dot notation (e.g. app.date) dynamically by splitting on the dots and looping through until we reach the desired key (date in your example) and then sets its value based on the value you provide as the last argument.

timmyjl12 · Accepted Answer · 2018-09-26 20:16:38Z

0

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.

answered Sep 26, 2018 at 20:16

timmyjl12

293 bronze badges

2 Comments

David Arreola Over a year ago

When i try this on the version 2.5.16 i got an Vue warn and did not work "Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.". My first implementation is like @Kamal Khan's do it, i ended wrapping in a component and emiting the value

Freddie Over a year ago

@DavidArreola can you share what you did on a codepen or something similar please :) ?

Collectives™ on Stack Overflow

update model from custom directive VueJS

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related