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

简单，默认情况下，您 bank_selected 的数据值是一个空对象（ {} ），因此也要使您的默认选项值也具有一个空对象。

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

不要忘了value =“” >>>：value =“ {}”
之前的冒号（：）

Answer 2

对于没有index.php?code=$uri的结构：

SELECT 的“更改事件”为v-model，请尝试以下操作：

HTML

@change

通过该事件，您应该能够获取选定的元素：

JS

<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>

如何在Vue中设置默认选择

2 个答案: