如何获得带有“多个”道具的 Vuetify Select 字段以与数据库中的 axios

Question

我有一个项目是在学习 Vue 的同时为学区建设的。我设置了 axios 并与其他几个字段一起使用以从 mysql 数据库获取和编辑数据，但我坚持在 v-select 组件上使用 multiple prop。我已经意识到它与数据类型有关。在数据库中，学校是一个String，但是v-select multiple 需要一个Array。

我正在使用 Vuetify 数据表和一个打开的对话框来编辑用户信息。其中一个选项是学校字段，它应该能够为用户分配多个学校。这是那个字段：

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

通常，v-model 会有“editedItem.school”，但它会返回一个字符串，而我需要一个数组。我有一个计算属性来将学校数据更改为数组：

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

这现在让我看到数据库中有哪些学校而不是空字段，但这给了我一个错误

“[Vue warn]：已将计算属性“schoolArray”分配给但它没有设置器。”

所以，我把它改成这样：

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

现在，我得到的错误是

'[Vue warn]: 渲染错误：“TypeError: this.editedItem.school.slice(...).split 不是一个函数”'

我觉得我缺少一些基本的东西，但我仍在努力学习 Vue 和 Vuetify。任何帮助或指导将不胜感激。

Answer 1

问题是您将设置editedItem.school为array而不是string，因此它会抱怨您不能设置split()数组。当您设置 时editedItem.school，您应该通过 将其转换回字符串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(",");       }    }  }}这是 codesandbox 上的示例演示。