У меня есть JQuery datepicker с именем bootstrap-datepicker, и я попытался преобразовать его в Vuejs Component, и я мог сделать это, но осталась только одна проблема - это не двустороннее связывание, и поэтому я не могу использовать его идеально.
Это мой компонент:
<template>
<input type="text" name="date" class="form-control" placeholder="Enter the date" required>
</template>
<script>
export default {
mounted() {
$(this.$el).datepicker({autoclose: true, format: 'yyyy-mm-dd', todayHighlight : true})
}
}
</script>
И вот как я его использовал:
<date-picker v-model="record.date"></date-picker>
Это корень Vuejs:
<script type="text/javascript">
const app = new Vue({
el: '#app',
data:{
record: {},
editMode: false,
url: '',
rows: @json($rows),
kinds: @json($kinds),
},
methods: {
setID(e){
this.url = @json(route('shexa.index')) + '/' + e.currentTarget.id
},
edit(e){
this.editMode = true
this.record = this.rows.data.find(row => row.id == e.currentTarget.id)
this.url = @json(route('shexa.index')) + '/' + e.currentTarget.id
},
add(){
this.editMode = false
this.record = {}
this.url = @json(route('shexa.store'))
}
}
});
Работает нормально, но когда я нажимаю на поле, оно появляется, но когда я покидаю поле, оно будет пустым.
Это адрес плагина: https://bootstrap -datepicker.readthedocs.io / ен / последний /