Add update event

Author: yogs22

api/db.json

@@ -1,8 +1,8 @@
 {
   "negara": [
     {
-      "id": 0,
-      "name": "Indonesia"
+      "name": "Indonesia",
+      "id": 0
     },
     {
       "id": 1,
@@ -19,6 +19,10 @@
     {
       "id": 4,
       "name": "Arab"
+    },
+    {
+      "name": "Australia",
+      "id": 5
     }
   ]
 }

pages/index.vue

@@ -4,24 +4,27 @@
 	<h2 class="subtitle">Name of Countries</h2>
 	<div class="columns"> 
 		<div class="column">
-			<form @submit.prevent="add(name)">
+			 
 				<div class="field">
 					<label class="label">Name</label>
 					<div class="control">
 						<input type="text" class="input" v-model="name" required>
 					</div>
 				</div>
-				<div class="control">
+				<div class="control" :class="{hidden: !isHidden}" @click="add(name)">
 					<button class="button is-link">Submit</button>
 				</div>
-			</form>
+				<div class="control" :class="{hidden: isHidden}" @click="update(name)">
+					<button class="button is-link">Update</button>
+				</div>
+			 
 		</div>
 		<div class="column">
 			<ul class="panel">
 				<li class="panel-heading">Countries List</li>
 				<li class="panel-block" v-for="country in countries" :key="country.id">
 					{{ country.name }} / &nbsp;
-					<button class="button is-info">Edit</button> &nbsp; 
+					<button class="button is-info" @click="show(country.id)">Edit</button> &nbsp; 
 					<button class="button is-danger" @click="remove(country.id, country.name)">Delete</button>
 				</li>
 			</ul>
@@ -34,19 +37,47 @@
 import { mapState, mapActions } from 'vuex'
 
 export default {
-  computed: mapState([
-  	'countries'
-  ]),
-  methods: {
-  	add(name) {
-		this.$store.dispatch('store', name)
-		this.name = ''
-  	},
-  	remove(id, name) {
-  		if (confirm('Do you want delete ' + name + ' ?')) {
-  			this.$store.dispatch('remove', id)
-  		}
-  	}
-  }
+	data: function() {
+		return {
+			name: '',
+			isHidden: true,
+			activeItem: null
+		}
+	},
+	computed: mapState([
+		'countries'
+	]),
+	methods: {
+		add(name) {
+			this.$store.dispatch('store', name)
+			this.name = ''
+		},
+		show(id) {
+			this.$store.dispatch('show', id).then((res) => {
+				this.name = res.name
+				this.activeItem = res
+				this.isHidden = false
+			})
+		},
+		update() {
+			this.$store.dispatch('update', { 
+				id: this.activeItem.id,  
+				name: this.name
+			})
+			this.name = ''
+			this.isHidden = true
+		},
+		remove(id, name) {
+			if (confirm('Do you want delete ' + name + ' ?')) {
+				this.$store.dispatch('remove', id)
+			}
+		}
+	}
 }
-</script>
+</script>
+
+<style type="text/css">
+	.hidden {
+		display: none;
+	}
+</style>

store/index.js

@@ -12,8 +12,12 @@ export const mutations = {
 		state.countries.push(item)
 	},
 	removeData(state, id) {
-		const foundItem = state.countries.findIndex(p => p.id === id)
-		state.countries.splice(foundItem, 1)
+		const foundIndex = state.countries.findIndex(p => p.id === id)
+		state.countries.splice(foundIndex, 1)
+	},
+	updateData(state, data) {
+		const foundItem = state.countries.find(p => p.id === data.id)
+		foundItem.name = data.name
 	}
 }
 
@@ -29,5 +33,13 @@ export const actions = {
 	async remove({commit}, id) {
 		const res = await axios.delete('negara/' + id)
 		commit('removeData', id)
+	},
+	async show({commit}, id) {
+		const res = await axios.get('negara/' + id)
+		return res.data	
+	},
+	async update({commit}, data) {
+		const res = await axios.put('negara/' + data.id, {name: data.name})
+		commit('updateData', data)
 	}
 }