I am struggling with getting all rows in a v-data-table component to be checked by default when using the checkboxes created by the select-all feature to filter information in the parent component.
So far, I have tried:
- Setting
selectedItemsto
in the parent component'sArray.from(this.$store.state.tableItems)data(which didn't work due to the item in the store not being defined at that point). - Setting
selectedItemstoArray.from(this.tableItems)in the child component'smountedorcreatedevent (which resulted in an "avoid mutating a prop directly" error).
I have a feeling that using a computed property might be the solution to this issue.
(There is probably a more Vue-like way to solve this with actions or events, but as a newcomer to Vue, I am still exploring different approaches.)
MyComponent.vue
<template>
<v-data-table
:value="selectedItems"
@input="$emit('update:selectedItems', $event)"
:headers="headers"
:items="tableItems"
item-key="id"
select-all
>
<template slot="items" slot-scope="props">
<td>
<v-checkbox v-model="props.selected" hide-details></v-checkbox>
</td>
<td>{{ props.item.id }}</td>
</template>
</v-data-table>
</template>
<script>
export default {
props: {
tableItems: { type: Array, },
selectedItems: { type: Array, },
},
data() {
return {
headers: [
{ text: 'ID', value: 'id', },
],
};
},
};
</script>
Parent.vue
<template>
<MyComponent :tableItems="tableItems" :selectedItems.sync="selectedItems"/>
</template>
<script>
export default {
components: {
MyComponent,
},
data() {
return {
selectedItems: [],
};
},
computed: {
tableItems() {
return this.$store.state.tableItems; // set by an axios request in beforeCreate in App.vue
},
}
};
</script>