森林海
2023-02-17 10:56:54
我有一個項目是在學習 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。任何幫助或指導將不勝感激。
1 回答

海綿寶寶撒
TA貢獻1809條經驗 獲得超8個贊
問題是您將設置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(",");
}
}
}
}
添加回答
舉報
0/150
提交
取消