finished re-render table budget after change activity

src/components/pages/PanelAdministrator.vue

@@ -24,7 +24,7 @@
             </b-card>
           </b-tab>
           <b-tab v-if="this.$store.state.user.role == 2" title="Pengaturan Admin">
-              <table-budget :data='dataTable'/>
+              <table-budget :data='dataTable' :key="dataTable.current_item.id" v-on:changeActivity="updateActivity($event)" />
           </b-tab>  
         </b-tabs>
       </b-card>
@@ -167,7 +167,28 @@ export default {
     filterTrigger(item) {
       this.totalRows = item.length
       this.currentPage = 1
-    }
+    },
+
+    updateCurrentActivity: function(id, activity_name, admin_name) {
+      this.dataTable.current_item.id = id;
+      this.dataTable.current_item.activity_name = activity_name;
+      this.dataTable.current_item.admin_name = admin_name;
+      console.log(this.dataTable.current_item.activity_name)
+    },
+
+    updateActivity: function(event) {
+      var element = this.dataTable.items.find( function(element){
+        if (element.id === event ){
+          console.log("before");
+          console.log(element);
+          return element;
+        }
+      })
+
+      this.updateCurrentActivity(element.id, element.activity_name, element.admin_name);
+      
+    },
+
   }
 }
 </script>

src/components/partials/TableBudget.vue

@@ -17,7 +17,7 @@
               size="sm"
             />
             <b-button
-              @click="assignAdmin(row)"
+              @click="updateAdmin()"
               variant="primary"
               size="sm"
               class="float-right mt-2 ml-2"
@@ -58,7 +58,7 @@
               Ubah Admin
             </b-button>
             <b-button
-              v-on:click="clearButtonHandler(row)"
+              v-on:click="removeAdmin()"
               variant="danger"
               size="sm"
             >
@@ -99,38 +99,11 @@
           <template slot="actions" slot-scope="row" >
             <b-button 
               size="sm"
-              v-on:click="switchToggleDratails(row)"  
+              v-on:click="seeDetail(row)"  
             >
               Lihat
             </b-button>
           </template>
-          <template slot="row-details" slot-scope="row">
-            <b-card
-              bg-variant="light"
-            >
-              <small><b>Mohon pilih Admin dari daftar di bawah ini:</b></small>
-              <b-form-select
-                v-model="selected"
-                :options="options"
-                size="sm"
-              />
-              <b-button
-                @click="assignAdmin(row)"
-                variant="primary"
-                size="sm"
-                class="float-right mt-2 ml-2"
-              >
-                Pilih Admin
-              </b-button>
-              <b-button
-                @click="switchToggleDetails(null)"
-                size="sm"
-                class="float-right mt-2"
-              >
-                Batalkan
-              </b-button>
-            </b-card>
-          </template>
           </b-table>
 
           <b-pagination
@@ -151,7 +124,9 @@ export default {
 
   },
   props:{
-    data : Object
+    data : {
+      type : Object
+    }
   },
   data() {
     return {
@@ -164,6 +139,7 @@ export default {
         { value: '2', text: 'William Rukmansa' },
         { value: '3', text: 'Ricky Kennedy' }
       ],
+      selected : 0,
     }
   },
   computed: {
@@ -201,6 +177,17 @@ export default {
 
     changeShowCardState : function() {
       this.showCard = !this.showCard;
+    },
+
+    removeAdmin : function() {
+      this.data.current_item.admin_name = '--';
+    },
+
+    updateAdmin : function() {
+      this.data.current_item.admin_name = this.options[this.selected].text;
+    },
+    seeDetail : function(row) {
+      this.$emit('changeActivity',row.item.id);
     }
       
   },