Question

一段时间以来，我一直在苦苦挣扎和研究如何控制v-autocomplete，但仍然找不到一个好的答案。我正在尝试使用v-autocomplete进行多个城市选择，并试图限制用户最多选择5个城市。我希望这会阻止用户添加更多选择。当前，计数器仅变为红色，但仍允许用户在通过时添加更多内容。5.是否有任何道具或功能可以让我执行此操作？我在某处遇到了描述，它说我必须使用其他验证API，但我在任何地方都找不到任何示例。

此外，其中一个选项是“排名前5位的城市”。我想将其视为已选择的5个城市。有没有办法将此选项的计数增加到5？并且，当剩余计数器小于5时，禁用前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

非常感谢您。

Answer 1

您可以为自动完成项添加计算属性，并且如果选择的长度超过4（5），则只需将选择的项返回到自动完成项即可，因此用户只能选择其他内容。仅当他删除至少一个城市时，选择才有资格返回。

Answer 2

我设法使其大部分正常工作。

当calculatedCouterValue达到5或更高时，菜单将被禁用。
computedCouterValue将每个选定的值都计数为1个单位，但将前5个计数为5。
如果用户选择“前5名”，则无法进一步选择其他城市。菜单已禁用
如果选择了一个城市，则前5名将被禁用，因为它将超过最大总数。

如果有更好的方法可以执行此操作，或者Vuetify开箱即用，请告诉我。

我无法解决的一件事是，我无法设置计数器值来反映来自computedCounterValue的自定义计数。我希望在选择前5个时计数器显示5/5。我尝试使用道具“ 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

Answer 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();
},

Answer 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.` 
    },
}

限制Vuetify v自动完成功能的用户选择

4 个答案: