我有一个项目是在学习 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
提交
取消