[英]How do I get a Vuetify Select field with the “multiple” prop to interact with axios data from database?
I have a project that I am building for a school district while learning Vue.我有一个项目,我正在学习 Vue 的同时为学区构建。 I have axios set up and working with several other fields to get and edit data from a mysql database, but I am stuck at using the multiple prop on a v-select component.
我设置了 axios 并与其他几个字段一起使用以从 mysql 数据库获取和编辑数据,但我坚持在 v-select 组件上使用 multiple 属性。 I have realized that it has to do with the data type.
我已经意识到它与数据类型有关。 In the database, the schools are a String, but v-select multiple requires an Array.
在数据库中,学校是一个String,但是v-select multiple需要一个Array。
I am using a Vuetify data table with a dialog that opens to edit the User's Information.我正在使用带有对话框的 Vuetify 数据表,该对话框可打开以编辑用户信息。 One of the options is a school field that should be able to assign multiple schools to a user.
选项之一是应能够将多所学校分配给用户的学校字段。 Here is that field:
这是那个字段:
<v-select
:items='schools'
v-model='schoolArray'
label='School'
multiple
item-text='school'
></v-select>
Normally, v-model would have 'editedItem.school', but that returns a string and I need an array.通常,v-model 会有'editedItem.school',但它返回一个字符串,我需要一个数组。 I have a computed property to change the school data to an array:
我有一个计算属性可以将学校数据更改为数组:
schoolArray (item) {
return this.editedItem.school.split(',')
}
This now lets me see what schools are in the database instead of an empty field, but this gave me an error这现在让我看到数据库中有哪些学校而不是空字段,但这给了我一个错误
"[Vue warn]: Computed property "schoolArray" was assigned to but it has no setter."
“[Vue 警告]:计算属性“schoolArray”已分配给但没有设置器。”
So, I changed it to this:所以,我把它改成了这样:
schoolArray: {
get: function () {
var stringToArray = this.editedItem.school.slice(0).split(',')
return stringToArray
},
set: function (school) {
this.editedItem.school = school
}
}
Now, the error I am getting is现在,我得到的错误是
'[Vue warn]: Error in render: "TypeError: this.editedItem.school.slice(...).split is not a function"'
'[Vue 警告]:渲染错误:“TypeError:this.editedItem.school.slice(...).split 不是函数”'
I feel like I am missing something fundamental, but I am still trying to learn Vue and Vuetify.我觉得我缺少一些基本的东西,但我仍在努力学习 Vue 和 Vuetify。 Any help or direction would be appreciated.
任何帮助或指导将不胜感激。
The problem is that you are setting the editedItem.school
to an array , instead of string , so it complains that you can't split()
an array.问题是您将
editedItem.school
设置为array ,而不是string ,因此它抱怨您不能split()
一个数组。
When you set the editedItem.school
, you should transform it back to string via Array.join(",")
.当您设置
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.