I'm currently working on integrating a select all button into the v-select component of Vuetify. The issue I am facing is that even though I can use the button to select all options, when I attempt to save, not all items are saved. However, if I manually select each option one by one and then save, all items from the dropdown are successfully saved. Can someone please assist me in identifying the problem?
<template>
<v-select
:items="documents"
v-model="user.versions"
:closeOnSelect="true"
multiple
attach
auto
item-text='name'
item-value='id'>
</v-select>
<v-btn class="red-button" @click='selectAll'>Select</v-btn>
<v-btn class="red-save-btn" @click='submitDocuments'><i class="material-icons edit">save</i> Save</v-btn>
</template>
<script>
export default {
props: ['user'],
data: function () {
return {
documents: [],
versions: []
}
},
methods: {
selectAll (){
this.user.versions = [...this.documents]
},
submitDocuments() {
var that = this;
this.$axios.put(`/my_account/users/${this.user.id}.json`, {user: this.user})
}
}
}
</script>