Question

当添加新元素时，Vue-js从文本框中删除所选日期。如果我输入任何文本而不是日期，则添加新元素文本将按原样显示。但是日期被删除了。

下面是我的HTML代码

<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>

以下是我的vue-js代码

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);
            }
        }
    });

请在我犯错的地方帮忙。

请检查小提琴：here

由于

Answer 1

Bootstrap（js）和jquery与vue合作并不友好。

我认为这是因为他们直接修改了DOM，而vue也有一个虚拟DOM，并以更加数据驱动的方式工作。

让它们一起工作需要额外的逻辑，我只能修复datetimepicker，我从来没有尝试过clockpicker

首先我改变addNewDate功能

//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 );

在initDate中，我们需要监听日期更改并更新模型

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

请参阅此部分工作fiddle

作为替代方案，您可以使用vue-flatpickr，此时这是最好的＆＃34; vue＆＃39;＆＃34;我发现处理日期时间输入

添加新元素时，Vue-js从文本框中删除了所选日期

1 个答案: