當添加新元素時,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/
感謝
能否請您提供一個小提琴再現錯誤? – AldoRomo88
@ AldoRomo88請檢查小提琴:https://jsfiddle.net/renishkhunt/bod4ob5y/19/ –