Table sort triggers [vuex] Do not mutate vuex store state outside mutation handlers

When sorting the a table rendered with the code below:

<template>
  <b-table striped hover :items="items" :fields="fields">
    <template slot="username" scope="item">
      {{item.item.username}}
    </template>
    <template slot="isActive" scope="item">
      {{item.item.active?'Yes :)':'No :('}}
    </template>
    <template slot="email" scope="item">
      {{item.item.Email}}
    </template>
  </b-table>
</template>

<script>
  export default {
    name: 'variant-table',
    props: ['items'],
    data: function () {
      return {
        fields: {
          username: {
            label: 'Username',
            sortable: true
          },
          isActive: {
            label: 'is Active'
          },
          email: {
            label: 'E-mail'
          }
        },
        filter: null
      }
    }

  }
</script>

My console throws a Vuex warning to not mutate the store state outside mutation handlers. I don’t feel that disabling strict: true in my store is the way to go.

Could it be a Vuex error inside the boostrap-vue package?

[tmorehouse]

Table details needs to use Vue’s $set(...) method in order to update the row’s details flag in the record data, which triggers the display of the details scoped slot.

Currently b-table creates a shallow slice() of the items array so that the order of the orignal table order is not mutated. But it doesn’t copy the rows data, rather it maintains the original record object reference.

We had, a few versions ago, switched to a deep copy of the record data, but many people were relying on the data being a reference to the actual data, and the ability to mutate it, so we switched back to using just a slice of the original items array. Not to mention, the overhead that was introduced by the deep copy (slowing the responsiveness of the table) and the lack of ability to clone certain data types and function references (loosing their this bound reference).

[pi0]

@Mark-de-Haan @piotrekfracek Thanks for reporting. 6e1f0a2 should resolve this problem by cloning data when filtering/sorting using slice() and JSON trick is not needed anymore.