如何在Vue中设置默认选择答案

【问题标题】：How to set default selection in Vue如何在Vue中设置默认选择
【发布时间】：2019-04-18 08:50:10
【问题描述】：

我似乎无法设置默认选择选项，只要我有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.js drop-down-menu vuejs2

【解决方案1】：

简单，您的 bank_selected 数据值默认为空对象 ({} )，因此您的默认选项值也具有空对象。

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

不要忘记 value="" >>> :value="{}" 之前的冒号 (:)

【讨论】：

【解决方案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>

通过事件你应该能够获得被选中的元素：

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

【讨论】：