How to Implement Delete Data in Vue-Tables-2?

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>;
    }
  }