vue.js - 如何在 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-components看到的文档那样实现

标签： vue.jsvue-tables-2

Answer 1

您的模板缺少该erase功能，这意味着您必须定义erase为您的组件方法，就像这样：

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