Vuetify v-select 属性类型检查不通过
P粉988025835
P粉988025835 2023-09-04 15:59:13
[Vue.js讨论组]
<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>{&quot;username&quot;: &quot;Desmond&quot;,&quot;email&quot;: &quot;desmond@test.com&quot;}</code></p> <pre class="lang-js prettyprint-override"><code>&lt;v-select v-model=&quot;selectedItem&quot; :items=&quot;items&quot; name=&quot;username&quot; item-text=&quot;username&quot; label=&quot;Select Item&quot; return-object &gt;&lt;/v-select&gt; </code></pre> <pre class="brush:php;toolbar:false;">&lt;script&gt; import axios from &quot;axios&quot;; export default { name: &quot;Testing123&quot;, data() { return { items: [], selectedItem: null, }; }, created() { this.fetchItems(); }, methods: { fetchItems() { axios .get(&quot;http://localhost:5000/items&quot;, config) .then((response) =&gt; { this.items = response.data }) .catch((error) =&gt; { console.error(error); }); },</pre> <p>这是我的<code>response.data</code></p> <pre class="brush:php;toolbar:false;">[ { &quot;username&quot;: &quot;Eric&quot;, &quot;email&quot;: &quot;eric@test.com&quot;, }, { &quot;username&quot;: &quot;Desmond&quot;, &quot;email&quot;: &quot;desmond@test.com&quot;, }, ]</pre></p>
P粉988025835
P粉988025835

全部回复(1)
P粉707235568

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

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

更改名称即可正常工作:

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

playground中可以看到示例。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号