在 Vuetify v-autocomplete 上限制用户选择答案

【问题标题】：Limit user selection on Vuetify v-autocomplete在 Vuetify v-autocomplete 上限制用户选择
【发布时间】：2020-08-31 09:58:24
【问题描述】：

我一直在苦苦寻找如何控制 v-autocomplete，但仍然没有找到好的答案。我正在尝试使用 v-autocomplete 进行多个城市选择，并尝试限制用户最多选择 5 个。我希望它会阻止用户添加更多选择。目前，计数器只变成红色，但仍然允许用户在超过 5 时添加更多。有没有任何道具或功能可以让我这样做？我在某处遇到了描述，它说我必须使用其他验证 API，但我在任何地方都没有找到任何示例。

此外，排名前 5 位的城市也是其中一个选项。我想将其视为被选中的 5 个城市。有没有办法将此选项的计数提高到 5？并且，当剩余计数器小于 5 时禁用 Top 5 选项？谢谢，

    <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
    ></v-autocomplete>

我的示例代码在这里。 https://codepen.io/OpPen/pen/LYpJppa

非常感谢。

【问题讨论】：

标签： vuetify.js v-select v-autocomplete

【解决方案1】：

我设法让它大部分工作。

当 computedCoutterValue 达到 5 或更多时，菜单将被禁用。
computedCouterValue 将每一个选择计为 1 个单元，但 Top 5 计为 5 个。
如果用户选择前 5 名，则无法进一步选择其他城市。菜单已停用
如果选择了一个城市，前 5 名将被禁用，因为它会超过最大总数。

如果有更好的方法可以做到这一点，或者 Vuetify 有一些开箱即用的东西我可以使用，请告诉我。

我无法解决的一件事是我无法设置计数器值来反映来自 computedCounterValue 的自定义计数。 I want the counter to show 5/5 when Top 5 is selected.我尝试使用prop“counter-value”，但没有生效。

     <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"
     ></v-autocomplete>
    </v-container>

https://codepen.io/OpPen/pen/LYpJppa

【讨论】：

【解决方案2】：

您可以为自动完成项目添加计算属性，如果所选长度超过 4 (5)，您只需将所选项目返回到自动完成项目，因此用户无法选择其他内容。仅当他移除至少 1 个城市时，才会返回可供选择的选项。

【讨论】：

谢谢你，Asi Ple，但我不太听从你的建议。

【解决方案3】：

我只在@change 处于活动状态时添加一个函数，并且在函数内部我检查模型大小。例如，我删除了模型的最后一个值。所以用户不能选择其他选项。

<v-select
v-model="currentCategories"
:items="categories"
item-text="name"
item-value="id"
chips
placeholder="Select category"
multiple
outlined
dense
@blur="updateGifts"
@change="limiteCategory"
></v-select>

limiteCategory() {
  if (this.currentCategory.length > 5) this.currentCategory.pop();
},

【讨论】：

这对我有用。谢谢

【解决方案4】：

我遇到了一个类似的问题，我通过解决方法解决了这个问题。我最终使表单无效并显示一条消息，而不是在阈值之后阻止用户输入。

  <v-autocomplete
    ...
    :counter="maxNumberOfChoices"
    :rules="validationRules"
  >

computed: {
    validationRules () {
      return this.maxNumberOfChoices ? [this.validateMaxNumberOfChoices] : []
    }
},

methods: {
  validateMaxNumberOfChoices (selectedChoices)  {
      return selectedChoices.length <= this.maxNumberOfChoices || `Choose ${this.maxNumberOfChoices} at most.` 
    },
}

【讨论】：