How to Implement Delete Data in Vue-Tables-2? - vue.js

Question

I am confused how to implement delete in vue-tables-2. I used this library https://www.npmjs.com/package/vue-tables-2
This is my code
HTML
<v-client-table :columns="columns" v-model="data" :options="options">
<div slot="action">
<button #click="erase" class="btn btn-danger">Delete</button>
</div>
<div slot="nomor" slot-scope>
<span v-for="t in nomer" :key="t">{{t}}</span>
</div>
<div slot="category_name" slot-scope="{row}">{{row.category_name}}</div>
</v-client-table>
Vue Js
<script>
var config = {
"PMI-API-KEY": "erpepsimprpimaiy"
};
export default {
name: "user-profile",
data() {
return {
nomer: [],
columns: ["nomor", "category_name", "action"],
data: [],
options: {
headings: {
nomor: "No",
category_name: "Category Name",
action: "Action"
},
filterByColumn: true,
sortable: ["category_name"],
filterable: ["category_name"],
templates: {
erase: function(h, row, index) {
return <delete id={row.data.category_id}></delete>;
}
}
}
};
},
methods: {
load() {
this.$http({
url: "api/v1/news_category/get_all_data",
method: "post",
headers: config
}).then(res => {
this.data = res.data.data;
});
},
del() {
this.$http({
url: "api/v1/news_category/delete",
method: "post",
headers: config
}).then(res => {
console.log("success");
});
}
},
mounted() {
this.load();
}
};
</script>
When I run the code, I got error "erase not defined". I wanna implement like the documentation which you can see at https://www.npmjs.com/package/vue-tables-2#vue-components

Answer 1

Your template is missing the erase function which means you have to define erase as your components method, just like that:
methods: {
erase(h, row, index) {
return <delete id={row.data.category_id}></delete>;
}
}