Vuetify v-select 属性类型检查不通过

Question

当我使用Vuetify 3中的v-select时，我经常遇到以下错误：

[Vue警告]: 无效的prop：prop“title”的类型检查失败。预期为String | Number | Boolean，但得到了Object

在

我不确定问题是什么。我从后端API获取了一个对象数组作为我的JSON响应。我的目标是在下拉菜单中显示所有的用户名，但当我在下拉菜单中选择一个项目时，我想将整个对象存储在一个变量中。例如，如果我在下拉菜单中选择了“Desmond”用户名，我希望将与Desmond相关的对象存储起来，即{"username": "Desmond","email": "desmond@test.com"}

<code><v-select
  v-model="selectedItem"
  :items="items"
  name="username"
  item-text="username"
  label="Select Item"
  return-object
></v-select>
</code>

<script>
import axios from "axios";

export default {
  name: "Testing123",
  data() {
    return {
      items: [],
      selectedItem: null,
    };
  },
  created() {
    this.fetchItems();
  },
  methods: {
    fetchItems() {

      axios
        .get("http://localhost:5000/items", config)
        .then((response) => {
          this.items = response.data
        })
        .catch((error) => {
          console.error(error);
        });
    },

这是我的response.data

[
    {
        "username": "Eric",
        "email": "eric@test.com",
    },
    {
        "username": "Desmond",
        "email": "desmond@test.com",
    },
]

Answer 1

您正在使用 :item-text，这是 Vuetify v2 中的属性名称，详见此处。

在 v3 中，该属性已更名为 :item-title。

更改名称即可正常工作：

<v-select
  item-title="username" 
  ...
></v-select>

在playground中可以看到示例。