People.vue

<template>
    <table class="table">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Vorname</th>
                <th scope="col">Nachname</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <add-people v-on:add-people="addPeople"></add-people>
            <tr v-for="p in people">
                <th scope="row">{{p.id}} {{p.edit}}</th>

                <td>
                    <input v-if="p.edit" class="form-control" ref="editFirst" v-model="p.firstname">
                    <span v-else>{{p.firstname}}</span>
                </td>
                <td>
                    <span v-show="p.edit == null">{{p.lastname}}</span>
                </td>
                <td>
                    <i class="material-icons action" v-on:click="deletePeople(p.id)">delete</i>
                    <i class="material-icons action" v-on:click="editPeople(p)">mode_edit</i>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script>
    export default {
        props: ['url'],
        data() {
            return {
                people: [],

            }
        },
        mounted() {
            axios.get(this.url)
                .then(response => {
                    this.people = response.data;

                    for (var i = this.people.length - 1; i >= 0; i--) {
                        this.people[i].edit = false;
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        methods: {
            addPeople(p) {
                axios.post(this.url, {
                    firstname: p.firstname,
                    lastname: p.lastname
                })
                .then(response => {
                    this.people.unshift(response.data);
                })
                .catch(error => {
                    console.log(error);
                });
            },
            deletePeople(id) {
                var result = confirm('Möchtest du diese Person wirklich löschen?');
                if(result == true) {

                    for (var i = this.people.length - 1; i >= 0; i--) {
                        if(this.people[i].id == id) {
                            this.people.splice(i, 1);
                        }
                    }

                    axios.get(this.url + "/" + id)
                    .then(response => {})
                    .catch(error => {
                        console.log(error);
                    });
                }
            },
            editPeople(p) {
                p.edit = true;
                p.firstname = p.firstname;
            }
        }
    }
</script>