How do I get a Vuetify Select field with the “multiple” prop to interact with axios data from database?

Question

I have a project that I am building for a school district while learning Vue. I have axios set up and working with several other fields to get and edit data from a mysql database, but I am stuck at using the multiple prop on a v-select component. I have realized that it has to do with the data type. In the database, the schools are a String, but v-select multiple requires an Array.

I am using a Vuetify data table with a dialog that opens to edit the User's Information. One of the options is a school field that should be able to assign multiple schools to a user. Here is that field:

<v-select
  :items='schools'
  v-model='schoolArray'
  label='School'
  multiple
  item-text='school'
></v-select>

Normally, v-model would have 'editedItem.school', but that returns a string and I need an array. I have a computed property to change the school data to an array:

schoolArray (item) {
  return this.editedItem.school.split(',')
}

This now lets me see what schools are in the database instead of an empty field, but this gave me an error

"[Vue warn]: Computed property "schoolArray" was assigned to but it has no setter."

So, I changed it to this:

schoolArray: {
  get: function () {
    var stringToArray = this.editedItem.school.slice(0).split(',')
    return stringToArray
  },
  set: function (school) {
    this.editedItem.school = school
  }
}

Now, the error I am getting is

'[Vue warn]: Error in render: "TypeError: this.editedItem.school.slice(...).split is not a function"'

I feel like I am missing something fundamental, but I am still trying to learn Vue and Vuetify. Any help or direction would be appreciated.

Answer 1

The problem is that you are setting the editedItem.school to an array , instead of string , so it complains that you can't split() an array.

When you set the editedItem.school , you should transform it back to string via Array.join(",") .

export default {
  data: () => ({
    schools: ["Schools 1", "Schools 2", "Schools 3"],
    editedItem: {...} 
  }),

  computed: {
    schoolArray: {
      get: function() {
        return this.editedItem.school.slice(0).split(",");
      },
      set: function(school) {
        // set it back to a string using `join(",")`
        this.editedItem.school = school.join(","); 
      }
    }
  }
}

Here's a sample demo on codesandbox.