时间戳

首页 > 解决方案 > 如何在Vue中设置默认选择

vue.js - 如何在Vue中设置默认选择

问题描述

我似乎无法设置默认选择选项，只要我有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 
    }
}

标签： vue.jsdrop-down-menuvuejs2

解决方案

对于没有的结构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)
    }
}

推荐阅读