새 요소를 추가 할 때 Vue-js가 텍스트 상자에서 선택한 날짜를 제거했습니다.

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> 

내가 실수를 만들 경우

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

이 도와주세요 내 VUE-JS 코드입니다.

바이올린에서 확인하십시오 : https://jsfiddle.net/renishkhunt/bod4ob5y/19/

감사

Answer 1

부트 스트랩 (JS)와 JQuery와 것은 VUE 작업 친화적하지 않습니다.

vue가 가상 DOM을 가지고 있고 더 많은 데이터 기반 방식으로 작동하는 동안 DOM을 직접 수정하기 때문이라고 생각합니다.

것은 그들이 함께 작동하도록하는 것은 우리가 수신 할 필요가 내가 initDate에서 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); 

을 변경

먼저하기 전에 clockpicker 작동하지 않았을, 난 단지, datetimepicker를 해결할 수있는 별도의 로직을 필요로 날짜 변경 및 업데이트 모델

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

부분적으로 작동하는 것을 참조하십시오이 순간, 당신은 vue-flatpickr를 사용할 수있는 대안으로

난 당신이 오류를 재생 바이올린을 제공시겠습니까 날짜 시간 입력