Vue

by Jussia

HTML

<div id="app">
  <template id="Date">
    <div class="row form-group">
    <div class="col-md-3">
      <label for="date">Дата </label>
      <input id="date" type="text" class="form-control" placeholder="31.12.2018" v-model="date" @change="getData">
    </div>
    <div class="col-md-3">
      <label for="begin">Начало </label>
      <input id="begin" type="text" class="form-control" placeholder="14:00" v-model="begin" @change="getData">
    </div>
    <div class="col-md-3">
      <label for="end">Окончание </label>
      <input id="end" type="text" class="form-control" placeholder="16:00" v-model="end" @change="getData">
    </div>
    <div class="col-md-3">
      <button type="button" class="btn btn-danger" @click="removeDate"><i class="fa fa-minus"></i></button>
    </div>
  </div>
  </template>
  <Date v-for="(n, index) in  this.eventsData.dates" :key="n.date" @deleteDate="onDeleteDate(index)" @dateInfo="onDateInfo" />
  <button variant="primary" @click="addDate">Добавить дату</button>
  <button variant="success" @click="createEvent">Создать мероприятие</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

Vue.component('Date', {
  template: '#Date',
  data () {
      return {
        date: '',
        begin: '',
        end: ''
      }
    },
    methods: {
      removeDate () {
        this.$emit('deleteDate')
      },

      getData () {
        this.$emit('dateInfo', {
          date: this.date,
          begin: this.begin,
          end: this.end
        })
        console.log('date', this.date, 'begin', this.begin, 'end', this.end)
      }
    }
});

new Vue({
  el: '#app',
  data () {
    return {
      date: '',
      begin: '',
      end: '',
      dates: {},
      eventsData: {
        'id': 0,
        'title': '',
        'description': '',
        'dates': [],
        'photoData': '',
        'locationId': 0
      }
    }
  },
  methods: {
  addDate () {
      console.log('this.eventsData.dates', this.eventsData.dates, 'this.dates', this.dates)
      this.eventsData.dates.push(this.dates)
    },

    onDeleteDate (index) {
      this.eventsData.dates.splice(index, 1)
      console.log('index', index, '22this.eventsData.dates', this.eventsData.dates)
    },
    createEvent () {
      this.eventsData.id = 0
      this.eventsData.title = this.title
      this.eventsData.description = this.description
      // this.eventsData.dates = this.eventsDate
      this.eventsData.photoData = this.photoData
      this.eventsData.locationId = 0

      // console.log('title', this.title, 'description', this.description, 'selected', this.selected, 'file', this.file,
      //   'this.date', this.date, 'this.begin', this.begin, 'this.end', this.end, 'data', data)
      console.log('data', this.eventsData)
    },

    onDateInfo (dateInfo) {
      this.dates = {
        'date': dateInfo.date,
        'timestampStart': dateInfo.begin,
        'timestampFinish': dateInfo.end
      }
      console.log('this.dates', this.dates)
    }
  }
});