Vue-js removed selected date from textbox when add new element

Question

Vue-js remove selected date from textbox when add new element. if i entered any text instead of date and add new element text is display as is it. but date is removed.

below is my HTML code

<div class="dateAvailabilityContainer">

            <div class="dateAvailability" v-for="(date, index) in dates">
                <div class="form-group date">
                    <input type="text" v-model='date.date' class="form-control date" v-bind:class="'datepicker_'+index" placeholder="Date">
                </div>
                <div class="form-group">
                    <input type="text" v-model='date.from' class="form-control from" placeholder="From">
                </div>
                <div class="form-group">
                    <input type="text" v-model='date.to' class="form-control to" placeholder="To">
                </div>
                <a href="#" v-if="index == 0" class="btn btn-success" v-on:click="addNewDate">
                    <i class="fa fa-plus"></i>
                </a>
                <a href="#" v-if="index > 0" class="btn btn-danger" v-on:click="removeThisDate(index)">
                    <i class="fa fa-minus"></i>
                </a>
            </div>

        </div>

and below is my vue-js code

var addAvailability = new Vue({
        el: '#addAvailability',
        data: {
            dates : [{
                date : '',
                from : '',
                to : '',
            }],
        },
        mounted: function () {
            this.addDatePicker( this.dates.length - 1 );
        },
        methods: {
            addNewDate: function () {
                this.dates.push({
                    date: '',
                    from: '',
                    to: '',
                });
                this.addDatePicker( this.dates.length - 1 );
            },
            removeThisDate : function(index){
                this.dates.splice(index, 1);
            },
            addDatePicker : function( id ){
                setTimeout(function(){
                    console.log('.datepicker_'+id);
                    $('.datepicker_'+id).datepicker({
                        autoclose: true,
                    });
                },500);
            }
        }
    });

please help where i create a mistake.

please check in fiddle : https://jsfiddle.net/renishkhunt/bod4ob5y/19/

Thanks

Answer 1

Bootstrap (js) and jquery aren't friendly working with vue.

I think that it is because they modify DOM directly while vue also has a virtual DOM and works in a more data driven way.

Make them work together requires extra logic, I could only fix datetimepicker, I never haven't work with clockpicker before

First I change addNewDate function

//Save new date in a variable
var dateModel = {
  date: '',
  from: '',
  to: '',
};
this.dates.push(dateModel);
var elementId = "datepicker_"+(this.dates.length - 1);
//pass new date to initDate function
this.initDate( elementId, dateModel );

In initDate we need to listen for date changes and update model

$('#'+id).datepicker({
   ...
}).on('changeDate', function(e){
    dateModel.date = e.format();
});

Please see this partially working fiddle

As alternative you could use vue-flatpickr, at this moment is the best "vue's way" that I have found to handle date time inputs