如何在Vue-Tables-2中实现删除数据

Question

我很困惑如何在vue-tables-2中实现删除。我用过这个图书馆https://www.npmjs.com/package/vue-tables-2

这是我的代码

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>

当我运行代码时，我得到错误"擦除未定义"。我想像你在上看到的文档一样实现https://www.npmjs.com/package/vue-tables-2#vue-组件

Answer 1

您的模板缺少erase函数，这意味着您必须将erase定义为组件方法，如下所示：

methods: {
erase(h, row, index) {
return <delete id={row.data.category_id}></delete>;
}
}