As I am working on a project for a school district and learning Vue, I have successfully set up axios to interact with a MySQL database. However, I am facing an issue with the multiple prop on a v-select component. The problem lies in the data type mismatch - while the schools in the database are stored as Strings, v-select multiple requires an Array.
Within my Vuetify data table setup, there is a dialog for editing User's Information. One of the fields is for schools, where a user should be able to select multiple options. Here is the code snippet for that field:
<v-select
:items='schools'
v-model='schoolArray'
label='School'
multiple
item-text='school'
></v-select>
Normally, 'editedItem.school' would be used as v-model, but since it returns a string and I need an array, I created a computed property to convert the school data into an array:
schoolArray (item) {
return this.editedItem.school.split(',')
}
This adjustment helped display the schools from the database correctly, but it triggered an error message:
"[Vue warn]: Computed property "schoolArray" was assigned to but it has no setter."
To resolve this, I updated the computed property as follows:
schoolArray: {
get: function () {
var stringToArray = this.editedItem.school.slice(0).split(',')
return stringToArray
},
set: function (school) {
this.editedItem.school = school
}
}
However, now I am encountering a new error:
'[Vue warn]: Error in render: "TypeError: this.editedItem.school.slice(...).split is not a function"'
I believe I may be overlooking something crucial in my understanding of Vue and Vuetify. If anyone could offer assistance or guidance, I would greatly appreciate it.