时间戳

首页 > 解决方案 > 如何使用“multiple”道具获取 Vuetify Select 字段以与数据库中的 axios 数据进行交互？

javascript - 如何使用“multiple”道具获取 Vuetify Select 字段以与数据库中的 axios 数据进行交互？

问题描述

我在学习 Vue 时正在为一个学区构建一个项目。我已经设置了 axios 并使用其他几个字段来从 mysql 数据库中获取和编辑数据，但是我一直坚持在 v-select 组件上使用 multiple 道具。我意识到它与数据类型有关。在数据库中，学校是一个字符串，但是 v-select multiple 需要一个数组。

我正在使用一个带有对话框的 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。任何帮助或方向将不胜感激。

标签： javascriptvue.jsvuetify.js

解决方案

问题是您将 设置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(","); 
      }
    }
  }
}

这是关于代码沙盒的示例演示。

推荐阅读