chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue

<template>
<div>
   <h3>Usagers concernés</h3>
   <dl>
      <dt>id</dt>
         <dd>{{ accompanying_course.id }}</dd>
      <dt>opening_date</dt>
         <dd>{{ accompanying_course.opening_date }}</dd>
      <dt>closing_date</dt>
         <dd>{{ accompanying_course.closing_date }}</dd>
      <dt>remark</dt>
         <dd>{{ accompanying_course.remark }}</dd>
      <dt>closing_motive</dt>
         <dd>{{ accompanying_course.closing_motive }}</dd>
   </dl>
   <label>{{counter}} usagers concernés</label>
   <table class="rounded">
      <thead>
         <tr>
            <th class="chill-orange">firstname</th>
            <th class="chill-orange">lastname</th>
            <th class="chill-orange">startdate</th>
            <th class="chill-orange">enddate</th>
            <th class="chill-orange">actions</th>
         </tr>
      </thead>
      <tbody>
         <tr v-for="person in accompanying_course.persons">
            <td>{{ person.firstname }}</td>
            <td>{{ person.lastname }}</td>
            <td>{{ person.startdate }}</td>
            <td>{{ person.enddate }}</td>
            <td>
               <ul class="record_actions">
                  <li><a class="sc-button bt-show"></a></li>
                  <li><a class="sc-button bt-update"></a></li>
                  <li><a class="sc-button bt-delete"></a></li>
               </ul>
            </td>
         </tr>
      </tbody>
   </table>
   <ul class="record_actions">
      <li>
         <button class="sc-button bt-create" @click="addPerson">Add Person</button>
      </li>
   </ul>
</div>
</template>

<script>
export default {
   name: 'AccompanyingCourse',
   data() {
      return {
         accompanying_course: {}
      };
   },
   computed: {
      accompanyingCourseId() {
         return window.accompanyingCourseId;
      }
   },
   methods: {
      addPerson() {
         this.accompanying_course.persons.push({
            "firstname": "Lisa",
            "lastname": "Simpson",
            "startdate": "1975-09-15",
            "enddate": "2021-04-20"
         })
      },
      async getAccompanyingCourse() {
         let data_;
         return fetch(`/fr/api/parcours/${accompanyingCourseId}/show`)
            .then(response => response.json())
            .then(data => {
               this.$data.accompanying_course = data;
            });
      }
   },
   async mounted() {
      await this.getAccompanyingCourse();
   }
};
</script>

<style scoped></style>