![](/img/trans.png)
[英]How can I get only the field from a vuetify table to post in axios
[英]How do I get a Vuetify Select field with the “multiple” prop to interact with axios data from database?
我有一个项目,我正在学习 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。 任何帮助或指导将不胜感激。
问题是您将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(",");
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.