Auto select rows in v-data-table

1
votes

I would like to programmatically checkmark a row in a v-data-table when an external listener notifies me of a particular value.

As an example, here is a Vuetify selectable table: https://vuetifyjs.com/en/components/data-tables#selectable-rows

In the example, If I were passed the value of 'Gingerbread' after the table and its data have already been instantiated, how would I programmatically select that corresponding row?

2
vuetify.js

2 Answers

3
votes

You can do this by pushing your values in your model like this:

HTML:

<div id="app">
  <v-app id="inspire">
    <v-btn @click="select">button</v-btn>
    <v-data-table
      v-model="selected"
      :headers="headers"
      :items="desserts"
      :single-select="singleSelect"
      item-key="name"
      show-select
      class="elevation-1"
    >
      <template v-slot:top>
        <v-switch v-model="singleSelect" label="Single select" class="pa-3"></v-switch>
      </template>
    </v-data-table>
  </v-app>
</div>

VueJS:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  methods: {
    select: function() {
      let result = this.desserts.find((dessert) => {
        return dessert.name == 'Gingerbread'
      })

      this.selected.push(result)
    }
  },
  data () {
    return {
      singleSelect: false,
      selected: [],
      headers: [
        { text: 'Dessert (100g serving)', value: 'name' },  
        { text: 'Calories', value: 'calories' },
      ],
      desserts: [
        { name: 'Gingerbread', calories: 356 },
        { name: 'Jelly bean', calories: 375 }
      ],
    }
  },
})
0
votes

The v-data-table component has a property called filteredItems which you can use to add items to the selected array

<v-data-table v-model="selected":items="itemsArray" ref="table"></v-data-table>

function selectAll() {
    this.$refs.table.filteredItems.map(item => {
        if(...some condition...) {
            this.selected.push(item)
        }
    })
}