在v-for中選擇選擇框的第一個選項

Question

我想在下面的選擇框中選擇第一個選項。 我試過這兩個.el.selected = true; 和

if (newValue == 0) return "selected";

但都不起作用。

<table class="table table-striped">
    <tr v-for="result in results">
        <select v-model='products[$index].startTime' class="form-control input">
            <option v-for="(timeIndex, time) in result.start_times" v-selected="timeIndex" >@{{ time.start_time }}-@{{ timeIndex }}</option>
        </select>
    </tr>
</table>

Vue.directive('selected', {
    bind: function () {

    },
    update: function (newValue, oldValue) {
        if(newValue==0)
        {
            this.el.selected = true;
        }
        return "";
    },
    unbind: function () {

    }
})

我該怎么做呢？ 我究竟做錯了什么？ 有沒有更好的辦法？

Answer 1

如果您的選擇綁定到您的v模型，則無需選擇任何特定選項，Vue知道將v-model中指定的keypath的值綁定到您在select中傳遞選項的VALUE。

<option v-for="(timeIndex, time) in result.start_times" :value="timeIndex" >@{{ time.start_time }}-@{{ timeIndex }}</option>

http://vuejs.org/guide/forms.html#Select-Options

但是，您沒有設置值。 你的綁定v-selected =“timeIndex”。 我以前從未見過v-selected，所以我在VueJS文檔中查找它，除非它是自定義指令，否則它不會出現，它什么都不做。

Answer 2

嘗試這個。 您可以將所選屬性綁定到表達式。 如果索引為0則為true，否則為false

<table class="table table-striped">
    <tr v-for="result in results">
        <select v-model='products[$index].startTime' class="form-control input">
            <option v-for="(timeIndex, time) in result.start_times" :selected="timeIndex === 0" >@{{ time.start_time }}-@{{ timeIndex }}</option>
        </select>
    </tr>
</table>