如何使用“multiple”道具獲取 Vuetify Select 字段以與數據庫中的 axios 數據進行交互？

Question

我有一個項目，我正在學習 Vue 的同時為學區構建。 我設置了 axios 並與其他幾個字段一起使用以從 mysql 數據庫獲取和編輯數據，但我堅持在 v-select 組件上使用 multiple 屬性。 我已經意識到它與數據類型有關。 在數據庫中，學校是一個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 警告]：計算屬性“schoolArray”已分配給但沒有設置器。”

所以，我把它改成了這樣：

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

現在，我得到的錯誤是

'[Vue 警告]：渲染錯誤：“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(","); 
      }
    }
  }
}

這是關於 codeandbox 的示例演示。