[OTHERS] Call a Function inside of display property for a button about vue3-table-lite HOT 12 CLOSED

      Array.prototype.forEach.call(elements, function (element) {
        if (element.classList.contains("common-button")) {
          element.addEventListener("click", function (event) {
            event.stopPropagation(); // prevents further propagation of the current event in the capturing and bubbling phases.
            console.log(this.dataset.id);
          });
        }
      });

<template>
  <table-lite
    :is-slot-mode="true"
    :is-loading="table.isLoading"
    :columns="table.columns"
    :rows="table.rows"
    :total="table.totalRecordCount"
    :sortable="table.sortable"
    @do-search="doSearch"
    @is-finished="table.isLoading = false"
  >
    <template v-slot:name="data">
      <button @click="logRow(data.value)">{{ data.value.name }}</button>
    </template>
  </table-lite>
</template>

<script>
import TableLite from "vue3-table-lite";

// Fake Data for 'asc' sortable
const sampleData1 = (offst, limit) => {
  offst = offst + 1;
  let data = [];
  for (let i = offst; i <= limit; i++) {
    data.push({
      id: i,
      name: "TEST" + i,
      email: "test" + i + "@example.com",
    });
  }
  return data;
};

// Fake Data for 'desc' sortable
const sampleData2 = (offst, limit) => {
  let data = [];
  for (let i = limit; i > offst; i--) {
    data.push({
      id: i,
      name: "TEST" + i,
      email: "test" + i + "@example.com",
    });
  }
  return data;
};

export default {
  name: "vue-scheduler-lite",
  components: { TableLite },
  props: {},
  data() {
    return {
      table: {
      isLoading: false,
        columns: [
          {
            label: "ID",
            field: "id",
            width: "3%",
            sortable: true,
            isKey: true,
          },
          {
            label: "Name",
            field: "name",
            width: "10%",
            sortable: true,
          },
          {
            label: "Email",
            field: "email",
            width: "15%",
            sortable: true,
          },
        ],
        rows: [],
        totalRecordCount: 0,
        sortable: {
          order: "id",
          sort: "asc",
        },
      }
    };
  },
  created() {
    this.doSearch(0, 10, "id", "asc");
  },
  methods: {
    doSearch(offset, limit, order, sort) {
      this.table.isLoading = true;
      setTimeout(() => {
        this.table.isReSearch = offset == undefined ? true : false;
        if (offset >= 10 || limit >= 20) {
          limit = 20;
        }
        if (sort == "asc") {
          this.table.rows = sampleData1(offset, limit);
        } else {
          this.table.rows = sampleData2(offset, limit);
        }
        this.table.totalRecordCount = 20;
        this.table.sortable.order = order;
        this.table.sortable.sort = sort;
      }, 600);
    },
    logRow(row) {
      console.log(row);
    }
  }
};
</script>