Vuetify v-select 属性类型检查不通过
<p>当我使用Vuetify 3中的v-select时，我经常遇到以下错误：</p>
<blockquote>
<p>[Vue警告]: 无效的prop：prop“title”的类型检查失败。预期为String | Number | Boolean，但得到了Object</p><p>
在 <VListItem key=0 title=`</p>
</blockquote>
<p>我不确定问题是什么。我从后端API获取了一个对象数组作为我的JSON响应。我的目标是在下拉菜单中显示所有的用户名，但当我在下拉菜单中选择一个项目时，我想将整个对象存储在一个变量中。例如，如果我在下拉菜单中选择了“Desmond”用户名，我希望将与Desmond相关的对象存储起来，即<code>{"username": "Desmond","email": "desmond@test.com"}</code></p>
<pre class="lang-js prettyprint-override"><code><v-select
v-model="selectedItem"
:items="items"
name="username"
item-text="username"
label="Select Item"
return-object
></v-select>
</code></pre>
<pre class="brush:php;toolbar:false;"><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);
});
},</pre>
<p>这是我的<code>response.data</code></p>
<pre class="brush:php;toolbar:false;">[
{
"username": "Eric",
"email": "eric@test.com",
},
{
"username": "Desmond",
"email": "desmond@test.com",
},
]</pre></p>
1
822
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
您正在使用
:item-text，这是 Vuetify v2 中的属性名称，详见此处。在 v3 中，该属性已更名为
:item-title。更改名称即可正常工作：
在playground中可以看到示例。