Выбор select из массива Vue

Question

Как при выборе option выводить Выбрано: А или Б соответственно ?

<div id="app">
    <select v-model="user">
        <option v-for="option in options">{{ option.name }}</option>
    </select>
    <span>Выбрано: {{user}}</span>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            user:'',
                options: [
                  { name: 'Текст 1', value: 'А' },
                  { name: 'Текст 2', value: 'Б' },
                ],
        }
    });
</script>

Answer 1

Вы забыли указать аттрибут value тегам option.

<div id="app">
    <select v-model="user">
        <option disabled value="">Выберете пункт</option>
        <option v-for="option in options" :value="option.value">{{ option.name }}</option>
    </select>
    <span v-if="getSelectedUser">Выбрано: {{getSelectedUser.value}}({{getSelectedUser.name}})</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      user: '',
      options: [
        {name: 'Текст 1', value: 'А'},
        {name: 'Текст 2', value: 'Б'},
      ],
    },

    computed: {
      getSelectedUser() {
        return this.options.find(o => o.value === this.user);
      }
    }
  });
</script>

БЛОГ НА HUSL

Выбор select из массива Vue

Ответы (1 шт):