[OTHERS] Call a Function inside of display property for a button

[at-the-vr]

Hey Lin, love your project, can you help me understand how I can call a function inside a display attribute for a button without the Event Listener methods

I understand if my logRow method is wrong, but can you help me just call that method so that it can at least console log the entire row or even static data

[at-the-vr]

I missed to mention, the way I have written the logRow method right inside that button, that method is not getting triggered and I would just like to know if there's an approach to do that (Thanks again for hearing me)

[linmasahiro]

Hi, @at-the-vr Here have 2 solution.

Solution 1:

1. Add is-rows-el to your button's class, and remove the @click="logRow(row)".
2. Add below code to @is-finished event. example

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

Solution 2: Use v-slot mode. You can ref example

[linmasahiro]

Hi, @at-the-vr If you want use options api to implement v-slot mode, here you are.

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

[at-the-vr]

Yeah that's what i did also my side, one thing, when i switch to v-slot mode, it broke the whole sorting process ( I am not using the do-search method) now With static mode the sorting process is pretty smooth but i dont understand what is missing in v-slot mode

[at-the-vr]

https://stackblitz.com/edit/vue-lwupnc?file=src/App.vue , can I ask if you can try running this app on stackblitz ? with following dependencies

[linmasahiro]

https://stackblitz.com/edit/vue-lwupnc?file=src/App.vue , can I ask if you can try running this app on stackblitz ? with following dependencies

Your example is crash now, so I don't know why not working. Maybe you can implement a simple sample your self first?

[at-the-vr]

I am sorry you meant crash as in ? like stackblitz won't load on your desktop or the application is wrong giving errors in console (currently I tried on incognito and the application loaded just fine)

[at-the-vr]

https://stackblitz.com/edit/vue-lwupnc?file=src/App.vue , can I ask if you can try running this app on stackblitz ? with following dependencies

Your example is crash now, so I don't know why not working. Maybe you can implement a simple sample your self first?

I have trimmed couple of markdown and css to reduce the overall length, can you give this another try ?

[linmasahiro]

I have trimmed couple of markdown and css to reduce the overall length, can you give this another try ?

OK, it's working now. I saw your example and found the bug. You need add :is-static-mode="true" to <table-lite>, because you not use do-search to get any data, that call static mode in vue3-table-lite. Please refs Here and Here about do-search

[at-the-vr]

Is this a bad way to produce my results (they are kinda working)

[linmasahiro]

if resolved, I will be close this issue :)

[at-the-vr]

I guess yeah, thanks for the slot stuff