vuetify.js - Vuetify v-select multiple 必须至少选择一项

Question

我有以下 v-select：

<v-select
  flat
  dense
  outlined
  multiple
  small-chips
  deletable-chips
  hide-details
  v-model='chosenStrings'
  label='Strings'
  :items='strings'
  :menu-props='{nudgeBottom: 40}'
>
  <template v-slot:append>
    <v-icon>
      mdi-chevron-down
    </v-icon>
  </template>
</v-select>

这是我的数据：

strings: ['a', 'b', 'c', 'd'],
chosenStrings: ['d']

我想不出一种方法来让它始终选择至少一个项目。如果它是唯一选择的项目，则可能会禁用它。

我在文档中没有看到required道具。尝试使用itemslot 并提供我自己的v-list-item，但猜测没有做对，因为它也失败了。

请问有什么建议吗？

Answer 1

您可以使用条件绑定deletable-chips并添加hide-selected道具这是这个。

<v-select
  flat
  dense
  outlined
  multiple
  small-chips
  :deletable-chips="chosenStrings.length>1"
  hide-selected
  hide-details
  v-model='chosenStrings'
  label='Strings'
  :items='strings'
  :menu-props='{nudgeBottom: 40}'
>
  <template v-slot:append>
    <v-icon>
      mdi-chevron-down
    </v-icon>
  </template>
</v-select>