Vue
HTML
<template id="Date">
<div>
<div>
<label for="date">Дата </label>
<input id="date" type="text" class="form-control" placeholder="31.12.2018" v-model="date" @change="getData">
</div>
<div>
<label for="begin">Начало </label>
<input id="begin" type="text" class="form-control" placeholder="14:00" v-model="begin" @change="getData">
</div>
<div>
<label for="end">Окончание </label>
<input id="end" type="text" class="form-control" placeholder="16:00" v-model="end" @change="getData">
</div>
<div>
<button type="button" class="btn btn-danger" @click="removeDate">-</button>
</div>
</div>
</template>
<div id="app">
<Date
v-for="(n, index) in eventsData.dates"
:key="n.id"
@delete-date="onDeleteDate(index)"
@date-info="onDateInfo(index, $event)"
></Date>
<button type="button" @click="addDate">Добавить дату</button>
<button type="button" @click="createEvent">Создать мероприятие</button>
</div>
Babel + JSX
Vue.component('Date', {
template: '#Date',
data () {
return {
date: '',
begin: '',
end: ''
}
},
methods:{
removeDate() {
this.$emit('delete-date')
},
getData() {
this.$emit('date-info', {
date: this.date,
begin: this.begin,
end: this.end
})
}
}
});
var ID = 0;
new Vue({
el: '#app',
data () {
return {
eventsData: {
'id': 0,
'title': '',
'description': '',
'dates': [],
'photoData': '',
'locationId': 0
}
}
},
methods:{
addDate() {
this.eventsData.dates.push({
id: ++ID
})
},
onDeleteDate(index) {
this.eventsData.dates.splice(index, 1)
console.log('index', index, 'this.eventsData.dates', this.eventsData.dates)
},
createEvent() {
this.eventsData.id = 0
this.eventsData.title = this.title
this.eventsData.description = this.description
this.eventsData.photoData = this.photoData
this.eventsData.locationId = 0
console.log('data', this.eventsData)
},
onDateInfo(index, dateInfo) {
Object.assign(this.eventsData.dates[index], {
'date': dateInfo.date,
'timestampStart': dateInfo.begin,
'timestampFinish': dateInfo.end
})
}
}
});