Как добавить атрибут value только первому тегу option?

Question

[r_g_b_a]

Здравствуйте.
Пытаюсь сделать выпадающий список из документации. Следуя рекомендации, хочу добавить первой опции атрибуты disabled и value="". Сделать неактивным пункт получилось, а как в зависимости от индекса выводить или скрывать атрибуты, в частности value? Мой пример
Еще раз задание в двух словах: имея массив

options: [
      "Learn JavaScript",
      "Learn Vue",
      "Play around in JSFiddle",
      "Build something awesome"
    ]

получить точно такую же разметку, как в примере с документации.

UPD. Придумал такое рабочее решение https://jsfiddle.net/24691wuc/ Можно ли сделать проще, или это оптимальный вариант?

Answer 1

[0xD34F]

<option
  v-for="(n, i) in options"
  v-text="n"
  v-bind="!i && { disabled: true, value: '' }"
></option>

Вот только не могу понять, в чём смысл отключения option'а, содержимое которого вполне осмысленное? - если пользователь выбрал что-то другое, а потом решил вернуться к первому варианту, то сделать это не удастся. Если вы хотите создать что-то вроде плейсхолдера, то создавайте отключенный option отдельно:

<option disabled value="">выбирай!</option>
<option v-for="n in options">{{ n }}</option>

Answer 2

[drawnofmymind]

https://jsfiddle.net/2gxc8mz9/ так что-ли?

Comments

[r_g_b_a]

Нет, так как в вашем примере в первом теге option отсутствует атрибут value=""

[drawnofmymind]

r_g_b_a, https://stackoverflow.com/questions/43839066/how-c...
Здесь достаточно развернутый ответ

[r_g_b_a]

Если вы имеете ввиду самый популярный ответ, то там три примера и ни одни не позволяет добиться вида/функционала, как в примере документации.
1 пример - по умолчанию select отображается пустым (без выбранной опции)
2 пример - активная опция задается из заранее известного значения, вместо первого из списка
3 пример - не используется v-model