Блог

У меня есть выпадающий список, в котором отображаются параметры кредитной карты по их метке. Значение поля метки равно четырем звездочкам и последним 4 цифрам карты, вот так: «****4241 «.

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

Проблема в том, что если 2 карты заканчиваются одинаковыми 4 числами, они не будут отображаться в раскрывающемся списке, поэтому я решаю это прямо сейчас, добавляя значение индекса к метке в массиве.
cards = [{label: '1: ****4242'}, {label: '2: ****4242'}]
Я бы хотел избавиться от этого взлома, хотя, если возможно.

Вы можете использовать стандартный HTML-тег select и связать его с вашим массивом cards точно так же, как это.

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» — массив кредитных карт.

Установите атрибут «ключ» для компонента v-select с уникальным значением. Это заставит vue отобразить их все.

Если вы можете, чтобы ваш массив cards также содержал идентификатор карты (или любые другие номера карт, хранящиеся за кулисами), тогда вы могли бы легко использовать это в качестве ключевого значения. Вы также можете объединить другие данные карты с номером карты в маске для значения ключа, если они у вас есть, чего должно быть достаточно.

Я предполагаю, что тот факт, что пользователь не сможет различать их, также является проблемой. Рассмотрите возможность указания имени владельца карты и срока действия, чтобы всегда выбиралась правильная карта.