森林海
2023-02-17 10:56:54
我有一個項目是在學(xué)習(xí) Vue 的同時為學(xué)區(qū)建設(shè)的。我設(shè)置了 axios 并與其他幾個字段一起使用以從 mysql 數(shù)據(jù)庫獲取和編輯數(shù)據(jù),但我堅持在 v-select 組件上使用 multiple prop。我已經(jīng)意識到它與數(shù)據(jù)類型有關(guān)。在數(shù)據(jù)庫中,學(xué)校是一個String,但是v-select multiple 需要一個Array。我正在使用 Vuetify 數(shù)據(jù)表和一個打開的對話框來編輯用戶信息。其中一個選項是學(xué)校字段,它應(yīng)該能夠為用戶分配多個學(xué)校。這是那個字段:<v-select
:items='schools'
v-model='schoolArray'
label='School'
multiple
item-text='school'></v-select>通常,v-model 會有“editedItem.school”,但它會返回一個字符串,而我需要一個數(shù)組。我有一個計算屬性來將學(xué)校數(shù)據(jù)更改為數(shù)組:schoolArray (item) { return this.editedItem.school.split(',')
}這現(xiàn)在讓我看到數(shù)據(jù)庫中有哪些學(xué)校而不是空字段,但這給了我一個錯誤“[Vue warn]:已將計算屬性“schoolArray”分配給但它沒有設(shè)置器?!彼?,我把它改成這樣:schoolArray: { get: function () { var stringToArray = this.editedItem.school.slice(0).split(',') return stringToArray
}, set: function (school) { this.editedItem.school = school
}
}現(xiàn)在,我得到的錯誤是'[Vue warn]: 渲染錯誤:“TypeError: this.editedItem.school.slice(...).split 不是一個函數(shù)”'我覺得我缺少一些基本的東西,但我仍在努力學(xué)習(xí) Vue 和 Vuetify。任何幫助或指導(dǎo)將不勝感激。
1 回答

海綿寶寶撒
TA貢獻(xiàn)1809條經(jīng)驗 獲得超8個贊
問題是您將設(shè)置editedItem.school為array而不是string,因此它會抱怨您不能設(shè)置split()數(shù)組。
當(dāng)您設(shè)置 時editedItem.school,您應(yīng)該通過 將其轉(zhuǎn)換回字符串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
提交
取消