Admin.js

<template>
    <div class="container">
        <div class="search-box">
    <input class="search" type="text" v-model="search" placeholder="Search here">
            <input type="submit" value="Cari" class="input-submit">

        </div>
    <table border="1px solid black" class="table" cellpadding="0" cellspacing="0">
        <thead>
        <th>
            nama
        </th>

        <th>
            email
        </th>

        <th>
            feedback
        </th>

        <th>
            actions
        </th>
        </thead>

        <tr v-for="(feed,key) of AllFeedback" :key="key">
            <td>{{feed.nama}} </td>
            <td>{{feed.email}}</td>
            <td>{{feed.feedback}}</td>
            <td>
                <button class="btn-edit" @click="editData(feed.id,feed.nama,feed.email,feed.feedback)">edit</button>
                <button class="btn-delete">delete</button>
            </td>
        </tr>
    </table>

        <div class="update" v-if="isEdit == true">
    <h3>edit data {{this.feedback}}</h3>
            <form @submit.prevent="updateData()" ref="formData">
            nama <input type="text" v-model="nama">
                email <input type="text" v-model="email">
                feedback <input type="text" v-model="feedback">
            <input type="submit" value="submit">
            </form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Admin",
        data(){
            return{
                AllFeedback :[],
                search :'',
                isEdit :true,
                nama : '',
                email : '',
                feedback : '',
                id : '',

            }
        },
        methods:{
            sendHttpRequest : function(method,url,data) {
                const promise = new Promise((resolve) => {
                    const xhr = new XMLHttpRequest();
                    xhr.open(method,url);

                    xhr.onload = () => {
                        let data = JSON.parse(xhr.response);
                        resolve(data);
                    }
                            xhr.send(JSON.stringify(data));
                });
                return promise
            },
                editData(id,nama,email,feed){
                this.isEdit = true
                this.nama = nama
                this.id = id
                this.email = email ;
                this.feedback = feed;
            },
            updateData(){
                let formData = {
                    nama : this.nama,
                    email : this.email,
                    feedback : this.feedback,
                };
                JSON.stringify(formData);
                var xhr = new XMLHttpRequest();
                xhr.open("PUT", 'http://localhost:8000/api/feedback/'+this.id);
                xhr.setRequestHeader('Content-type','application/json; charset=utf-8');
                xhr.onload = function () {

                    if (xhr.readyState == 4 && xhr.status == 201) {
                        alert(xhr.response)
                    } else {
                        alert(xhr.status)
                    }
                }
                xhr.send(formData);
            }
        },
        created() {
            this.sendHttpRequest('GET','http://localhost:8000/api/feedback').then(responseData => {
                this.AllFeedback = responseData['data'];
            });
        },
    }
</script>

<style scoped>
    table{
        margin: 0 auto;
    }
    .search{
        grid-column:1/4;
        grid-row: 1/3;
        padding:  20px 20px ;
        border: none;
        border-radius: 20px;
        box-shadow: 1px 8px 29px -10px rgba(0,0,0,0.75);
        outline: none;
    }
    .search-box{
        width: 60%;
        grid-column-gap: 20px;
        display: grid !important;
        grid-template-columns:  1fr 1fr 1fr 1fr ;
        grid-template-rows:  50px;
        margin: 20px auto 40px;

    }
    .input-submit{
        grid-column:4/5;
        background: #42b983;
        border: none;
        box-shadow: 1px 8px 29px -10px rgba(0,0,0,0.75);
        /*padding:20px;*/
        font-size: 20px;
        border-radius: 20px;
    }
    .search::placeholder{
        padding-left: 20px;
        font-size: 20px;
        opacity: 0.5;
    }

    .table td, .table th {

        padding:10px;

    }

    .table th {
        background: #00997e;
        color: #fffbf7;
        font-size: 20px;
    }

    .btn-delete{
        background: #990002;
        border: 0;
        padding:5px;
        border-radius: 5px;
        color:white;
        font-weight:bold ;
        margin: 4px;
    }

    .btn-edit{
        background: #ff9b39;
        border: 0;
        padding:5px;
        border-radius: 5px;
        color:white;
        font-weight:bold ;
    }

</style>