如何在Vue中设置默认选择

Posted 2023-02-23

【中文标题】如何在Vue中设置默认选择

【英文标题】：How to set default selection in 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 
    

【参考方案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>

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

JS

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