0

我一直在努力寻找如何控制 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

非常感谢。

4

4 回答 4

2

我设法让它大部分工作。

  • 当 computedCouterValue 达到 5 或更多时，菜单将被禁用。
  • computedCouterValue 将每个选择的单元计为 1 个单元，但 Top 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

于 2020-05-16T01:50:32.930 回答
0

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

于 2020-05-14T22:36:57.813 回答
0

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

  <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.` 
    },
}
于 2021-06-18T12:37:17.897 回答
0

我只在@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();
},
于 2021-02-25T13:52:51.217 回答