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-model，则无需选择任何特定选项，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>

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

2 个答案: