This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div> | |
<ul v-for="user in users" :key="user.id"> | |
<li> | |
<span>{{user.name}}</span>   | |
</li> | |
</ul> | |
</div> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
/* eslint-disable */ | |
import axios from 'axios' | |
export default { | |
data(){ | |
return{ | |
users: [] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<li> | |
<span>{{user.name}}</span>   | |
<button @click="edit(user)">Edit</button> || <button @click="del(user)">Delete</button> | |
</li> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
data(){ | |
return{ | |
form: { | |
id: '', | |
name: '' | |
}, | |
users: '', | |
updateSubmit: false | |
} | |
}, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
add(){ | |
axios.post('http://localhost:3000/users/', this.form).then(res => { | |
this.load() | |
this.form.name = '' | |
}) | |
}, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
edit(user){ | |
this.updateSubmit = true | |
this.form.id = user.id | |
this.form.name = user.name | |
}, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | |
}) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div> | |
<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> | |
<button type="button" v-show="updateSubmit" @click="update(form)">Update</button> | |
</form> | |
<ul v-for="user in users" :key="user.idd"> | |
<li> |
OlderNewer