当添加新元素时，Vue-js从文本框中移除选定日期

当添加新元素时，Vue-js从文本框中移除选定日期。如果我输入任何文字而不是日期，并添加新的元素文本是原样显示。但日期被删除。下面当添加新元素时，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); 
      } 
     } 
    });

请帮助我在那里创建了一个错误。

请小提琴检查：https://jsfiddle.net/renishkhunt/bod4ob5y/19/

感谢

来源

2017-02-09 Renish Khunt

能否请您提供一个小提琴再现错误？ – AldoRomo88

@ AldoRomo88请检查小提琴：https：//jsfiddle.net/renishkhunt/bod4ob5y/19/ –

引导（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，此时是最好的“VUE的方式”，我发现处理日期时间投入

来源

2017-02-10 14:10:45 AldoRomo88

AldoRomo88是正确的 - 您必须钩住日历小部件的更改事件，并确保将其应用于模型后选取器关闭。如果你在Chrome中使用Vue DevTools，你可以清楚地看到这一点。 –

当添加新元素时，Vue-js从文本框中移除选定日期

回答

相关问题