在Vuetify v-autocomplete上限制用户选择
我苦苦思索了一段时间，想知道如何控制自动补全功能，但还是没有找到一个好的答案。我正在尝试使用v-autocomplete来选择多个城市，并试图将用户的选择限制在最多5个。我希望它会阻止用户添加更多的选择。目前，计数器只会变成红色，但当它超过5的时候，仍然允许用户添加更多。有什么道具或函数可以让我这样做吗？我在某个地方遇到了说明，它说我必须使用其他验证API，但我在任何地方都找不到任何示例。
此外，其中一个选项是排名前5的城市。我想把它看作是5个被选中的城市。有没有办法将此选项的计数提高到5？并且，当剩余计数器小于5时，禁用Top 5选项？谢谢你
我的示例代码在这里。https://codepen.io/OpPen/pen/LYpJppa
非常感谢。
回答 3
Stack Overflow用户
发布于 2020-05-16 09:50:33
我设法让它基本上正常工作。
- 当computedCouterValue达到5或更高时，菜单将被禁用。
- computedCouterValue将选择的每个计算为1个单位，但前5个计算为5个。
- 如果用户选择前5名，则不能再选择其他城市。菜单已禁用
- 如果选择了一个城市，前5名将被禁用，因为它将超过最大总数。
如果有更好的方法或者Vuetify有我可以使用的开箱即用的东西，请让我知道。
我无法找到解决方法的一件事是，我无法设置计数器值以反映来自computedCounterValue的自定义计数。当选择Top 5时，我希望计数器显示5/5。我试着使用道具“counter value”，但它不起作用。
Stack Overflow用户
发布于 2020-05-15 06:36:58
您可以为自动完成项添加计算属性，如果选定的长度大于4 (5)，则只需将选定项返回到自动完成项，因此用户无法选择其他项。只有当他删除至少一个城市时，才会返回Availablitity to pick。
Stack Overflow用户
发布于 2021-02-25 21:52:51
我只在@change处于活动状态时添加函数，并在函数中检查模型大小。例如，我删除了模型的最后一个值。因此用户不能选择其他选项。
limiteCategory() {
if (this.currentCategory.length > 5) this.currentCategory.pop();
},https://stackoverflow.com/questions/61804607
复制相似问题
腾讯云开发者
