Answer the question
In order to leave comments, you need to log in
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,
});
}
});
Vue.directive('picker', {
inserted: function (el) {
el.timepicker({
'timeFormat': 'HH:mm',
'stepMinute': 5,
});
}
});
<input class="dt1" type="text" v-picker v-model="row.val">
Answer the question
In order to leave comments, you need to log in
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;
},
}
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 questionAsk a Question
731 491 924 answers to any question