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

<template>
    <div class="vue-component">
        <h3>Usagers concernés</h3>
        <dl>
            <dt>id</dt>
                <dd>{{ persons_associated.id }}</dd>
            <dt>opening_date</dt>
                <dd>{{ persons_associated.opening_date }}</dd>
            <dt>closing_date</dt>
                <dd>{{ persons_associated.closing_date }}</dd>
            <dt>remark</dt>
                <dd>{{ persons_associated.remark }}</dd>
            <dt>closing_motive</dt>
                <dd>{{ persons_associated.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 persons_associated.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>
    import Vue from 'vue'
    import VueResource from 'vue-resource'

    Vue.use(VueResource)

    export default{
        data () {
            return {
                persons_associated: []
            }
        },
        http: {
            root: 'http://localhost:8001/fr/api'
        },
        methods: {
            addPerson(){
                this.persons_associated.persons.push({"firstname": "Lisa", "lastname": "Simpson", "startdate": "1975-09-15", "enddate": "2021-04-20" })
            }
        },
        computed: {
            counter() {
                return this.persons_associated.persons.length
            }
        },
        created() {
            this.$resource('parcours/861/show').get().then((response) => {
                this.persons_associated = response.data
            }, (response) => {
                console.log('erreur', response);
            })
        }
    }
</script>

<style>
</style>