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

Question

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

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

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

Answer 1

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

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

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

Answer 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”是信用卡数组。