Как установить выбор по умолчанию в Vue

Question

Я не могу установить опцию выбора по умолчанию, как только у меня v-model выбор по умолчанию больше не работает

Рабочая:

<select class="uk-select uk-form-width-large" style="float: right">
        <option hidden>Select Bank</option>
        <option v-for="bank in bank_list" v-bind:value="bank">
            {{ bank.bank_name }}
        </option>
    </select>

Не работает:

<select class="uk-select uk-form-width-large" style="float: right" v-model="bank_selected">
    <option hidden>Select Bank</option>
    <option v-for="bank in bank_list" v-bind:value="bank">
        {{ bank.bank_name }}
    </option>
</select>

Поскольку настройка по умолчанию работает без v-model, я пытаюсь использовать @onChange, но не могу понять, как передать выбранный банк, потому что банковский цикл находится в <options>, а не в <select> теге

<select class="uk-select uk-form-width-large" style="float: right" @onChange="selectOnChange">
    <option hidden>Select Bank</option>
    <option v-for="bank in bank_list" v-bind:value="bank">
        {{ bank.bank_name }}
    </option>
</select>

Данные и методы:

data() {
    return {
        bank_list: [...],
        bank_selected: {}, // empty by default
    }
},
methods: {
    selectOnChange(event) {
        console.log("onChange....", event);
        // logs event but cannot get value in event.target.value 
    }
}

Answer 1

Simple, Ваши значения данных для bank_selected по умолчанию являются пустыми объектами ( {} ), поэтому в качестве значения параметра по умолчанию укажите также пустой объект.

<option :value="{}" hidden>Select Bank</option>

Не забывайте двоеточие (:) перед значением = "" >>>: значение = "{}"

Answer 2

Для структуры без v-model:

«Событие изменения» для SELECT равно @change, попробуйте это:

HTML

<select class="uk-select uk-form-width-large" style="float: right" @change="selectOnChange">
    <option hidden>Select Bank</option>
    <option v-for="bank in bank_list" :value="bank">
        {{ bank.bank_name }}
    </option>
</select>

С помощью события вы сможете получить выбранный элемент:

JS

methods: {
    selectOnChange(event) {
        console.log(event.srcElement.value)
    }
}