ヴュー-jsから削除選択した日付

Question

ヴュー-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/

おかげ

Answer 1

ブートストラップ（JS）とjQueryをVUEでの作業フレンドリーではありません。

私はVUEは、仮想DOMを持っており、より多くのデータ駆動型の方法で動作しながら、彼らは直接DOMを変更するので、それがあると思います。

それらを連携させるには、余分なロジックを必要とし、私はdatetimepickerを修正することができ、私はaddNewDate機能私たちが聞く必要があるinitDateで

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

を変更まず

前に、私は clockpickerでは動作しませんていません日付の変更と更新モデル

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

これは部分的に動作していますあなたはこの時点で、vue-flatpickrを使用することができます別の方法として

は私が