Vue: отображение списка параметров в раскрывающемся списке vue-select, которые имеют одинаковое значение?

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

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

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


vue.js vue-select
person RohimL    schedule 03.04.2019    source источник
comment
value и параметры не являются стандартными свойствами v-select vuetify. Что это за библиотека?   -  person DedaDev    schedule 03.04.2019

Ответы (2)


arrow_upward
0
arrow_downward

Задайте атрибут key компонента v-select с уникальным значением. . Это заставит vue отобразить их все.

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

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

person Liam Steele    schedule 03.04.2019

arrow_upward
0
arrow_downward

Вы можете использовать стандартный тег выбора 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-модель содержит значение выбранной опции, а card - массив кредитных карт.

person s.junaid    schedule 03.04.2019