Bootstrap-Vue table not updating unless debug is printed

Question

I'm trying to add some Ctrl + click functionality to a Bootstrap-Vue table in order to select multiple rows. To check if it behaves correctly, I print out some debug info on the page and to the console.

<template>
  <div>
    <b-table striped hover :fields="fields" :items="items" @row-clicked="rowClick"></b-table>
    Debug selected: {{selected.map(item => item.name).join(', ')}}
  </div>
</template>

<script>
export default {
  name: 'Table',
  data () {
    return {
      fields: [
        {key: 'id'},
        {key: 'name'}
      ],
      items: [
        {id: '1', name: 'Row 1'},
        {id: '2', name: 'Row 2'},
        {id: '3', name: 'Row 3'},
        {id: '4', name: 'Row 4'},
        {id: '5', name: 'Row 5'}
      ],
      selected: []
    }
  },
  methods: {
    rowClick(item, index, event) {
      if(!event.ctrlKey) {
        this.selected.forEach(selectedItem => selectedItem._rowVariant = null);
        this.selected = [];
      }
      if(event.ctrlKey && this.selected.includes(item)) {
        item._rowVariant = null;
        this.selected = this.selected.filter(selectedItem => selectedItem !== item);
      } else {
        item._rowVariant = 'info';
        this.selected.push(item);
      }
      console.log('Debug selected: ' + this.selected.map(item => item.name).join(', '));
    }
  }
}
</script>

This works fine, but when I remove the debug line in the template, the table is no longer visually updated and it seems _rowVariant has no effect, even though the console log indicates that the rows are still selected properly.

EDIT: Here is a fiddle: https://jsfiddle.net/aznan/24enw63a/39/

Answer 1

Strange! I could answer it better if you had a fiddle or plnk setup. But still this could be due to a lag.

Try wrapping the function withtin setTimeout like

    rowClick(item, index, event) {
       setTimeout(function(){
          if(!event.ctrlKey) {
            this.selected.forEach(selectedItem => selectedItem._rowVariant = null);
            this.selected = [];
          }
          if(event.ctrlKey && this.selected.includes(item)) {
            item._rowVariant = null;
            this.selected = this.selected.filter(selectedItem => selectedItem !== item);
          } else {
            item._rowVariant = 'info';
            this.selected.push(item);
          }
        });
      }