0

I have a dropdown that is showing credit card options by their label. The value of the label field is four asteriks and the last 4 digits of the card like this: "****4241". 

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

The problem is that if 2 cards happen to end in the same 4 numbers, it won't show both of them in the dropdown so I am solving this right now by prepending a an index value on the label in the array. cards = [{label: '1: ****4242'}, {label: '2: ****4242'}] I'd like to get rid of this hack though if possible.

RohimL
  • 157
  • 1
  • 3
  • 13

2 Answers2

0

Set the "key" attribute on the v-select component with a unique value. This will force vue to render all of them.

If you can have your cards array also contain the id of the card (or whatever the card numbers are stored against behind the scenes), then you could use that as the key value easily. You could also concatenate the other card details with the masked card number for the key value if you have them which should be sufficient.

I'm assuming the fact that the user won't be able to distinguish between them is also an issue. Consider providing card holder name and expiry so that the correct card is always selected.

tony19
  • 125,647
  • 18
  • 229
  • 307
Liam Steele
  • 146
  • 8
0

You can use standard html select tag and bind that with your cards array just like this.

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>`

Here "v-model" contains value of selected option and "cards" is the array of credit cards.

Community
  • 1
  • 1
s.junaid
  • 19
  • 5