I
I
Igor Che2017-04-18 07:49:27
JavaScript
Igor Che, 2017-04-18 07:49:27

How to add jquery-ui on element inside Vue.js app?

Trying to bind a jQuery timepicker to an input inside a Vue.js app.
This is how the script works, but the data from the input is not saved in data.

app = new Vue({
updated() {
            $('.dt1').timepicker({
                'timeFormat': 'HH:mm',
                'stepMinute': 5,
            });
    }
});

I understand that you need to use directives. I also experimented with them, but nothing came of it. Timepicker is not called at all.
Vue.directive('picker', {
        inserted: function (el) {
            el.timepicker({
                'timeFormat': 'HH:mm',
                'stepMinute': 5,
            });
        }
    });

And a piece from HTML:
<input class="dt1" type="text" v-picker v-model="row.val">

Answer the question

In order to leave comments, you need to log in

2 answer(s)
I
Igor Che, 2017-04-18
@chewarer

Made. I don't really like how it works, but it works. The timepicker has an onClose method, which is called when the timepicker modal window is closed. I attached a function to this method that updates a specific entry in data. I didn't find any other way.
It would be great if you could change the value of an element in the data array by accessing the id of the element associated with it via v-model.

directives: {
            picker: {
                inserted: function (el, binding) {
                    $(el).timepicker({
                        'timeFormat': 'HH:mm',
                        'stepMinute': 5,
                        onClose: function(dateText) {
                            app.updateVal(binding.value['i'], binding.value['day'], dateText)
                        }
                    });
                }
            }
        },

        methods:{
            updateVal : function (i, day, time) {
                this.data[i][day] = time;
            },
        }

I'm not going to give the template in its entirety. Here is part of it:
i, day - parameters passed to the directive.
i - number of iteration from the loop in which the input is wrapped.

E
Evgeny Kulakov, 2017-04-18
@kulakoff Vue.js

Variant "to make it work": https://codepen.io/kerf/pen/rmNgay
But this is not a scalable solution.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question