v-inの選択ボックスの最初のオプションを選択

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

選択があなたのvモデルに縛られている場合、特定のオプションを選択する必要はありません.vueは、v-modelで指定されたキーパスの値を、select 。

<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の場合はあなただけ行うことができ

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