chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue

<template>
<div class="vue-component">
   <h3>{{ $t('title.persons_associated')}}</h3>
   <label>{{ $tc('persons_associated.counter', counter) }}</label>
   <table class="rounded"> 
      <thead>
         <tr>
            <th class="chill-orange">{{ $t('persons_associated.firstname') }}</th>
            <th class="chill-orange">{{ $t('persons_associated.lastname') }}</th>
            <th class="chill-orange">{{ $t('persons_associated.startdate') }}</th>
            <th class="chill-orange">{{ $t('persons_associated.enddate') }}</th>
            <th class="chill-orange">{{ $t('action.actions') }}</th>
         </tr>
      </thead>
      <tbody> 
         <person-item 
            v-for="participation in participations" 
            v-bind:participation="participation" 
            v-bind:key="participation.id" 
            @remove="removePerson">
         </person-item>
      </tbody>
   </table>
   <ul class="record_actions">
      <li>
         <button class="sc-button bt-create" @click="addPerson">
            {{ $t('persons_associated.addPerson') }}
         </button>
      </li>
   </ul>
</div>

</template>

<script>
import { mapState } from 'vuex';
import PersonItem from "./PersonItem.vue"

let SimpsonId = 10000

export default {
   name: 'PersonsAssociated',
   components: { 
      PersonItem,
   },
   computed: mapState({
      participations: state => state.accompanying_course.participations,
      counter: state => state.accompanying_course.participations.length
   }),
   methods: {
      addPerson() {
         this.$store.commit('addParticipation', {
            id: SimpsonId++,
            person: { firstName: "Lisa", lastName: "Simpson", id: SimpsonId },
            startDate: { datetime: "1975-09-15T00:00:00+0100" }, 
            endDate: { datetime: "1975-09-28T00:00:00+0100" }, 
         })
      },
      removePerson(item) {
         this.$store.commit('removeParticipation', item)
      }
   }
}
</script>