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选择组件上将"key" attribute设置为唯一值。这将迫使vue渲染所有这些。

如果可以让您的纸牌数组还包含纸牌的ID（或幕后存储的任何卡号），那么您可以轻松地将其用作键值。如果您有足够的话，还可以将其他卡的详细信息与掩码的卡号作为键值进行连接。

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

Answer 2

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

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

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

2 个答案:

HTML：