当我使用Vuetify 3中的v-select时,我经常遇到以下错误:
[Vue警告]: 无效的prop:prop“title”的类型检查失败。预期为String | Number | Boolean,但得到了Object
在
我不确定问题是什么。我从后端API获取了一个对象数组作为我的JSON响应。我的目标是在下拉菜单中显示所有的用户名,但当我在下拉菜单中选择一个项目时,我想将整个对象存储在一个变量中。例如,如果我在下拉菜单中选择了“Desmond”用户名,我希望将与Desmond相关的对象存储起来,即{"username": "Desmond","email": "desmond@test.com"}
<v-select v-model="selectedItem" :items="items" name="username" item-text="username" label="Select Item" return-object ></v-select>
<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",
},
] Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
您正在使用
:item-text,这是 Vuetify v2 中的属性名称,详见此处。在 v3 中,该属性已更名为
:item-title。更改名称即可正常工作:
在playground中可以看到示例。