javascript - 在 v-for 中选择选择框的第一个选项

Question

我想在下面的选择框中选择第一个选项。我已经尝试过 this.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

如果你的 select 绑定(bind)到你的 v-model，你不需要选择任何特定的选项，Vue 知道将 v-model 中指定的键路径的值绑定(bind)到你在 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

但是，您没有设置值。您正在绑定(bind) v-selected="timeIndex"。我以前从未见过 v-selected，所以我在 VueJS 文档中查找它，它没有出现，除非它是自定义指令，否则它什么都不做。