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

<template>
<div class="vue-component">
   <h3>Usagers concernés</h3>
    
   <label>{{ counter }} usagers</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> 
         <person-item 
            v-for="person in persons_associated" 
            v-bind:person="person" 
            v-bind:key="person.id" 
            @remove="removePerson" />
      </tbody>
   </table>
   
   <ul class="record_actions">
      <li><button class="sc-button bt-create" @click="addPerson">Ajouter un usager</button></li>
   </ul>
   
</div>
</template>

<script>
import PersonItem from "./PersonItem.vue"

export default {
   name: 'PersonsAssociated',
   components: { 
      PersonItem 
   },
   props: { 
      persons_associated: Array 
   },
   data() {
      return {
         persons: this.persons_associated
      }
   },
   computed: {
      async counter() {
         // Pourquoi je peux pas compter un tableau avec length ???!!!
         return this.persons_associated.length //     <= boum !
      }
   },
   methods: {
      addPerson() {
         this.persons_associated.push({
            "firstname": "Lisa",
            "lastname": "Simpson",
            "startdate": "1975-09-15",
            "enddate": "2021-04-20"
         })
      },
      removePerson(item) {
         this.persons_associated = this.persons_associated.filter(person => person !== item)
      }
   }
}
</script>