Skip to content

Instantly share code, notes, and snippets.

View kabitacode's full-sized avatar
🎯
Focusing

Muhamad Zulfiqor kabitacode

🎯
Focusing
View GitHub Profile
<template>
<div>
<ul v-for="user in users" :key="user.id">
<li>
<span>{{user.name}}</span> &#160;
</li>
</ul>
</div>
</template>
{
"users": [
{
"id": 0,
"name": "jhon doe"
},
{
"id": 1,
"name": "jhoni"
},
<script>
/* eslint-disable */
import axios from 'axios'
export default {
data(){
return{
users: []
}
<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>
<li>
<span>{{user.name}}</span> &#160;
<button @click="edit(user)">Edit</button> || <button @click="del(user)">Delete</button>
</li>
data(){
return{
form: {
id: '',
name: ''
},
users: '',
updateSubmit: false
}
},
add(){
axios.post('http://localhost:3000/users/', this.form).then(res => {
this.load()
this.form.name = ''
})
},
edit(user){
this.updateSubmit = true
this.form.id = user.id
this.form.name = user.name
},
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);
})
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)
})
}