при использовании v-модели на <select>первая опция не появляется в select - PullRequest
Новая
       3

при использовании v-модели на <select>первая опция не появляется в select

0 голосов
/ 16 октября 2018

Мой HTML: 

<select id='select-id' v-model='position'>
    <option>Opt 1</option>
    <option>Opt 1</option>
</select>

Компонент Vue: 

var app = new Vue({
    el: '#elementid',
    data: {
        name: '',
        position: 'Select Option',
    },
});

Когда они выбирают опцию, я использую v-модель для отправки этого значения в переменную данных 'name '(буду использовать это для других целей).

Однако визуально поле выбора остается пустым, пока я не открою его и не выберу опцию.Если я удаляю v-модель, она работает как обычно с вариантом 1, который отображается как предварительно выбранный параметр.Я даже пытался предварительно установить для «name» значение «Select Option».Я пытался использовать html5 атрибуты selected selected.

1 Ответ

0 голосов
/ 16 октября 2018

Вам необходимо использовать значение , а также отключено .
В этом случае начальное значение v-модели должно совпадать со значением отключенного. 

<div id="app">
  <select id='select-id' v-model='position'>
    <option disabled value="">Select option</option>
    <option>Opt 1</option>
    <option>Opt 1</option>
  </select>
</div>

var app = new Vue({
  el: '#app',
  data: {
    position: '',
  },
});

Если начальное значение выражения v-модели не совпадает ни с одним из параметров, элемент будет отображаться в «невыбранном» состоянии.В iOS это приведет к тому, что пользователь не сможет выбрать первый элемент, потому что в этом случае iOS не запускает событие изменения.Поэтому рекомендуется предоставить отключенную опцию с пустым значением, как показано в примере выше.

Документация

...