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.

@BoussadjraBrahim editedItem is defined like this: editedItem: { firstname: '', lastName: '', school: '', email: '', phone: '', view: '', role: '' }, — codeartistgirl
Looking at it again, that would mean that the database is a string, editedItem is an object and v-select multiple requires an array. Am I seeing that right? — codeartistgirl

Blackraspberryyy Blackraspberryyy · Accepted Answer · 2020-09-06T04:52:32

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.

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

1 Answers