2017-02-09 52 views
0

當添加新元素時,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/

感謝

+0

能否請您提供一個小提琴再現錯誤? – AldoRomo88

+0

@ AldoRomo88請檢查小提琴:https://jsfiddle.net/renishkhunt/bod4ob5y/19/ –

回答

1

引導(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的方式」,我發現處理日期時間投入

+0

AldoRomo88是正確的 - 您必須鉤住日曆小部件的更改事件,並確保將其應用於模型後選取器關閉。如果你在Chrome中使用Vue DevTools,你可以清楚地看到這一點。 –

相關問題