handleSelectChange doesn't work if the HTML in vue is accessing the data point being updated from the handle select change.

[codymurphyjones]

<div v-if="selectedLength > 0" style="text-align: center;">Test</div>

methods: {
    handleSelectChange(rows) {
      this.selectedRequests = [].concat(rows);
      this.selectedLength = rows.length
    },
}

<v2-table
      :data="filterAndSortData(requests)"
      stripe
      :default-sort="{
        prop: 'timestamp',
        order: ascending ? 'ascending' : 'descending',
      }"
      :total="requests.length"
      :shown-pagination="true"
      :pagination-info="paginationInfo"
      :row-class-name="getRowClassName"
      @sort-change="handleSortChange"
      @page-change="handlePageChange"
      @select-change="handleSelectChange"
    >

I haven't be able to understand why, but if I remove the v-if="selectedLength > 0" then my check and uncheck on the boxes works perfectly fine.

however when I need to actually use the information being checked and unchecked, it seems like its basically freezing my app. I can't even use my sort by ascending/descending but as soon as I remove v-if="selectedLength" the problem resolves itself.

[codymurphyjones]

handleSelectChange

So from what I can tell the issue is when handleSelectChange affects any data point that is being rendered, even if whats being rendered is passed through a computed property

[codymurphyjones]

/* eslint-disable */

<template>
  <div>
      <div v-if="getSelectedLength() > 0" style="color:#000">Test</div>
    <v2-table
      :data="filterAndSortData(requests)"
      stripe
      :default-sort="{
        prop: 'timestamp',
        order: ascending ? 'ascending' : 'descending',
      }"
      @select-change="handleSelectChange"
    >
      <v2-table-column type="selection" width="45" height="60"> </v2-table-column>
      <v2-table-column label="Name" prop="name"></v2-table-column>
     <v2-table-column label="Email" prop="email"></v2-table-column>
     <v2-table-column label="Phone" prop="phoneNumber"></v2-table-column>
    </v2-table>
  </div>
</template>

<script>
export default {
  name: "DataTable",
  props: ["requests"],
  data() {
    return {
      prop: "timestamp",
      loading: true,
      ascending: false,
      page: 1,
      totalItemsPerPage: 10,
      filteredRequests: [],
      selectedRequests: [],
      selectedLength: 0,
    };
  },
  methods: {
    filterAndSortData(requests) {
      var sortedByTable = [].concat(requests);
      if (this.ascending) {
        sortedByTable = sortedByTable.sort(function (a, b) {
          return Date.parse(a.timestamp) - Date.parse(b.timestamp);
        });
      } else {
        sortedByTable = sortedByTable.sort(function (a, b) {
          return Date.parse(b.timestamp) - Date.parse(a.timestamp);
        });
      }
      return sortedByTable ;
    },
    handleSelectChange(rows) {
         this.selectedRequests = [].concat(rows);
         this.selectedLength = this.selectedRequests.length;
    },
    getSelectedLength() {
        //Note that the value doesnt even need to be used, just simple accessed for this bug to occur.
        const { selectedLength } = this
        /*return selectedLength;*/
        return 1;
    }
  },
};
</script>

<style scoped lang="scss"></style>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

Here is a small working sample, pass in a data set with name, email, and phoneNumber and use the multi select option.

This should work as an independent component