Using Getter Setter with Vue v-model and JQuery for DatePicker input

Question

I installed jquery plugin (datepicker) along with vue and embedded in a component with getter and setter for v-model data flow.

I have success in retrieving jquery datepicker input to a v-model component, but not unable to display it back as follow:

<DatePickerHelper :value="componentGetObject['## startDate ##']"
:signal="triggerSignal" pro="## startDate ##" ></DatePickerHelper>

     triggerSignal(obj,$event) {
       this.componentSignal({pro:obj.pro,ev:event.target.value});
     },

<template>
<div>
    <input v-model.lazy="proxyValue" />        
</div>
</template>

props: ['value', 'signal', 'pro' ],
computed: {
    proxyValue: {                      
                  get() { return this.value; },
                  set(newValue) { 
                    var self = this;
                    jquery(this.$el).datepicker({
                        onSelect: function(newValue) {
                            self.signal({pro: self.pro, val: newValue});        
                      }
                    });
                  }                 
                }
              },

Should I apply it on mounted and beforeDestroy just like this JSBbin example ?

This is a following up from this case , for your reference.

Answer 1

I feel like you are not doing it as it is intended in the vue way...

what is proxyValue ? why it contains props ? props should be in component not in computed.

For creating a jquery datepicker using vue you have to do the following:

1. create a component Datepicker
2. create a template inside component which use the jquery datepicker html
3. on mounted() function listen to jquery change event for the datepicker

4. in change emit an input event to the parent with like this:

   this.$emit('input', value);

5. when you use the component create a v-model and it will be updated automatically when data is changed... (due to the input fired event)
6. do what ever you want with the model then.

Hope this information will help you.

Answer 2

Strangely, jquery doesn't want to receive jquery(this.$el) , so the solution turns out to be like this :

    computed: {
        proxyValue: {
                      get() { return this.value; }          
                    }
                  },
    mounted:function(){
        var self = this;
        jquery('#dateInput')
        .datepicker({
            dateFormat: 'yy-mm-dd',
            onSelect: function(newValue) {
                self.signal({pro: self.pro, val: newValue});        
          }
        });
    }

With set function is completely inside mounted