kabitacode

<template>
  <div>
    <ul v-for="user in users" :key="user.id">
      <li>
      <span>{{user.name}}</span> &#160;
      </li>
    </ul>
  </div>
</template>

kabitacode

{
  "users": [
    {
      "id": 0,
      "name": "jhon doe"
    },
    {
      "id": 1,
      "name": "jhoni"
    },

kabitacode

<script>
/* eslint-disable */ 

import axios from 'axios'

export default {
  data(){
    return{
        users: []
    }

kabitacode

  <form @submit.prevent="add">
        <input type="hidden" v-model="form.id">
        <input type="text" v-model="form.name">
        <button type="submit" v-show="!updateSubmit">add</button> <!-- jika tidak update maka tombol update tidak muncul --> 
        <button type="button" v-show="updateSubmit" @click="update(form)">Update</button> <!-- jika tombol edit di klik maka tombol add akan berubah menjadi update -->
    </form>

kabitacode

<li>
      <span>{{user.name}}</span> &#160;
      <button @click="edit(user)">Edit</button> ||  <button @click="del(user)">Delete</button>
</li>

kabitacode

data(){
    return{
        form: {
          id: '',
          name: ''
        },
        users: '',
        updateSubmit: false
    }
  },

kabitacode

 add(){
      axios.post('http://localhost:3000/users/', this.form).then(res => {
          this.load()
          this.form.name = ''
      })
 },

kabitacode

 edit(user){ 
        this.updateSubmit = true
        this.form.id = user.id 
        this.form.name = user.name 
 },

kabitacode

  update(form){
        return axios.put('http://localhost:3000/users/' + form.id , {name: this.form.name}).then(res => {
        this.load()
        this.form.id = ''
        this.form.name = ''
        this.updateSubmit = false
      }).catch((err) => {
        console.log(err);
        
      })

kabitacode

  del(user){
      axios.delete('http://localhost:3000/users/' + user.id).then(res =>{
          this.load()
          let index = this.users.indexOf(form.name)
          this.users.splice(index,1)
      })
  }