Vue：在 vue-select 下拉列表中呈现共享相同值的选项列表？答案

【问题标题】：Vue: Rendering a list of options in vue-select dropdown that share same value?Vue：在 vue-select 下拉列表中呈现共享相同值的选项列表？
【发布时间】：2019-04-03 00:39:20
【问题描述】：

我有一个按标签显示信用卡选项的下拉菜单。标签字段的值是四个星号和卡片的最后 4 位数字，如下所示：“****4241”。

<v-select 
   :value="this.cards[0]" 
   :options="this.cards">
    {{option.label}}
</v-select>

问题是，如果 2 张卡碰巧以相同的 4 个数字结尾，它不会在下拉列表中显示它们，所以我现在通过在数组中的标签上添加一个索引值来解决这个问题。 cards = [{label: '1: ****4242'}, {label: '2: ****4242'}] 如果可能的话，我想摆脱这种黑客攻击。

【问题讨论】：

值和选项不是 vuetify 标准的 v-select 属性。那是什么图书馆？

标签： vue.js vue-select

【解决方案1】：

将 v-select 组件上的 "key" attribute 设置为唯一值。这将强制 vue 渲染所有这些。

如果您可以让您的卡片数组还包含卡片的 id（或在幕后存储的任何卡片编号），那么您可以轻松地将其用作键值。您还可以将其他卡详细信息与键值的屏蔽卡号连接起来，如果您有它们应该足够了。

我假设用户无法区分它们也是一个问题。考虑提供持卡人姓名和有效期，以便始终选择正确的卡。

【讨论】：

【解决方案2】：

您可以使用标准的 html 选择标签并将其与您的卡片数组绑定，就像这样。

HTML：

<select name="cards" v-model="cardsValue">
  <option value="">Select a credit card</option>
  <option v-for="(card, index) in cards" :value="card" :key="index">{{card.label}}
  </option>
</select>`

这里“v-model”包含所选选项的值，“cards”是信用卡数组。

【讨论】：