Vuejs Опция. Получить идентификатор из выбранного элемента - PullRequest
Новая
       8

Vuejs Опция. Получить идентификатор из выбранного элемента

0 голосов
/ 18 февраля 2020

Я на самом деле использую VueJS и столкнулся с небольшой проблемой

У меня есть селектор, который должен запомнить ID для отправки в запросе ios позже. В «selected» var нам нужно сохранить только имя «type» по причинам, удобным для пользователя. Итак, мне нужно получить идентификатор, выбранный пользователем, не отображая его. На самом деле код выглядит следующим образом. 

<select v-model="selected">
 <label for="lg_type" class="sr-only">Type de personnage</label>
  <option disabled value="">Choisir un type</option>
  <option v-for="onetype in playertype" class="form-control" id="lg_type" name="lg_type" v-bind:key="onetype.idType">
      {{onetype.idType}}-{{ onetype.name }}
  </option>
</select>

Выбрано - фактическое имя выбранного типа. Так как это vue, когда я нажимаю на другой тип из моего селектора, он автоматически меняет его

onetype содержит две вещи: имя, а тип игрока idType содержит массив всех типов

Как мы можем видеть в коде, я отображаю такие вещи, как «idType - name», но я хочу отображать только «name» (поэтому просто удалите onetype.idType), но мне нужно получить идентификатор для его отправки elswhere (я не могу использовать onetype.idType, чтобы получить идентификатор для моего метода axe ios)

Я не знаю, достаточно ли он ясен, но мне нужно отправить onetype.idType топору ios метод, но я не могу использовать его таким образом.

Заранее спасибо, это сводит меня с ума, и я чувствую, что упустил что-то очевидное> <</p>

1 Ответ

1 голос
/ 18 февраля 2020

Используйте атрибут value, и вы получите его в v-model вместо отображаемой опции: 

<select v-model="selected">
  <label for="lg_type" class="sr-only">Type de personnage</label>
  <option disabled value="">Choisir un type</option>
  <option 
    v-for="onetype in playertype" 
    :value="onetype.idType"
    class="form-control"
    id="lg_type"
    name="lg_type"
    v-bind:key="onetype.idType"
  >{{ onetype.idType }}-{{ onetype.name }}</option>
</select>
...