entityMap|blocks|key|brkn6|text|您可以为自动完成项添加计算属性，如果选定的长度大于4+(5)，则只需将选定项返回到自动完成项，因此用户无法选择其他项。只有当他删除至少一个城市时，才会返回Availablitity+to+pick。|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

You can add computed property for autocomplete items and if selected length would be more than 4 (5), you just return selected items to autocomplete items, so user just couldn't pick something else. Availablitity to pick will return only if he remove at least 1 city.

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://codepen.io/OpPen/pen/LYpJppa|blocks|key|6ghn5|text|我设法让它基本上正常工作。|unstyled|depth|inlineStyleRanges|entityRanges|f9crn|当computedCouterValue达到5或更高时，菜单将被禁用。|unordered-list-item|fdm02|computedCouterValue将选择的每个计算为1个单位，但前5个计算为5个。|155aj|如果用户选择前5名，则不能再选择其他城市。菜单已禁用|9570g|如果选择了一个城市，前5名将被禁用，因为它将超过最大总数。|4mi8n|如果有更好的方法或者Vuetify有我可以使用的开箱即用的东西，请让我知道。|9iree|我无法找到解决方法的一件事是，我无法设置计数器值以反映来自computedCounterValue的自定义计数。当选择Top+5时，我希望计数器显示5/5。我试着使用道具“counter+value”，但它不起作用。|fgjvo|offset|length^0|0|0|0|0|0|0|0|0|10|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|Y|G|@]|H|@]|6|$]]|$A|I|C|J|2|K|F|Z|G|@]|H|@]|6|$]]|$A|L|C|M|2|K|F|10|G|@]|H|@]|6|$]]|$A|N|C|O|2|K|F|11|G|@]|H|@]|6|$]]|$A|P|C|Q|2|K|F|12|G|@]|H|@]|6|$]]|$A|R|C|S|2|E|F|13|G|@]|H|@]|6|$]]|$A|T|C|U|2|E|F|14|G|@]|H|@]|6|$]]|$A|V|C|8|2|E|F|15|G|@]|H|@$W|16|X|17|A|18]]|6|$]]]]

I managed to get it mostly working.

<ul>
<li>Menu will be disabled when the computedCouterValue reaches 5 or more.</li>
<li>computedCouterValue counts each selected as 1 unit, but Top 5 is counted as 5. </li>
<li>If user select Top 5, other cities cannot be further selected. Menu is disabled</li>
<li>If a city is selected, Top 5 is disabled as it would exceed max total count. </li>
</ul>

If there are better ways to do this or Vuetify has something out of the box I can use, please let me know.

One thing that I cannot find get resolved is that I cannot set the counter value to reflect my custom count from computedCounterValue. I want the counter to show 5/5 when Top 5 is selected. I tried to use prop "counter-value", but it doesn't take effect.

<pre><code> &lt;v-autocomplete
 label="Cities"
 v-model="selectedValues"
 :items="itemList"
 item-text="name"
 item-value="id"
 hide-no-data
 hide-selected
 :counter="maxSelected"
 :counter-value="computedCounterValue"
 :menu-props="menuProps"
 multiple
 chips
 deletable-chips
 @input="adjustOptions"
 &gt;&lt;/v-autocomplete&gt;
 &lt;/v-container&gt;
</code></pre>

<a href="https://codepen.io/OpPen/pen/LYpJppa" rel="nofollow noreferrer">https://codepen.io/OpPen/pen/LYpJppa</a>

entityMap|blocks|key|fvn4s|text|我只在@change处于活动状态时添加函数，并在函数中检查模型大小。例如，我删除了模型的最后一个值。因此用户不能选择其他选项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|eov12|limiteCategory()+{
++if+(this.currentCategory.length+>+5)+this.currentCategory.pop();
},|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

I only add a function when @change is active and inside the function I check the model size. I remove the last value of the model, for example. So the user cannot select other option.
<pre><code>&lt;v-select
v-model=&quot;currentCategories&quot;
:items=&quot;categories&quot;
item-text=&quot;name&quot;
item-value=&quot;id&quot;
chips
placeholder=&quot;Select category&quot;
multiple
outlined
dense
@blur=&quot;updateGifts&quot;
@change=&quot;limiteCategory&quot;
&gt;&lt;/v-select&gt;

limiteCategory() {
 if (this.currentCategory.length &gt; 5) this.currentCategory.pop();
},
</code></pre>

I'm struggling and googling on how to control the v-autocomplete for a while, but still didn't find a good answer. I'm trying to use v-autocomplete for multiple city selection and attempting to limit a user to select at maximum of 5. I would expect that it would stop the user from adding more selection. Currently, the counter only turns red, but still lets the user add more when it passes 5. Is there any Props or functions to let me do this? I ran into description somewhere and it said I had to use other validation API, but I didn't find any example anywhere.

Also, one of the options is Top 5 Cities. I'd like to consider it as 5 cities being selected. Is there a way to advance the count of this option to 5? And, disable the Top 5 option when remaining counter is less than 5? Thank you,

<pre><code> &lt;v-autocomplete
 label="Cities"
 v-model="selectedValue"
 :items="itemList"
 item-text="name"
 item-value="id"
 hide-no-data
 hide-selected
 counter="5"
 multiple
 chips
 deletable-chips
 &gt;&lt;/v-autocomplete&gt;

</code></pre>

My sample code is here. <a href="https://codepen.io/OpPen/pen/LYpJppa" rel="nofollow noreferrer">https://codepen.io/OpPen/pen/LYpJppa</a>

Thank you very much.

Limit user selection on Vuetify v-autocomplete

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 我苦苦思索了一段时间，想知道如何控制自动补全功能，但还是没有找到一个好的答案。我正在尝试使用v-autocomplete来选择多个城市，并试图将用户的选择限制在最多5个。我希望它会阻止用户添加更多的选择。目前，计数器只会变成红色，但当它超过5的时候，仍然允许用户添加更多。有什么道具或函数可以让我这样做吗？我在某个地方...

问在Vuetify v-autocomplete上限制用户选择
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Vuetify v-autocomplete上限制用户选择EN