常に最初の値を選択select vue.js

Question

select（vue.js内）で最初の項目を選択するにはどうすればよいですか？

<div class="ride-item-content"> 
    <select v-model="ride.location_id"> 
    <option v-for="location in locations" v-bind:value="location.id"> 
     {{ location.from }} - {{ location.to }} 
    </option> 
    </select> 
</div> 

JSON

{ 
    "locations": { 
    "total": 2, 
    "per_page": 20, 
    "current_page": 1, 
    "last_page": 1, 
    "next_page_url": null, 
    "prev_page_url": null, 
    "from": 1, 
    "to": 2, 
    "data": [ 
     { 
     "id": 1, 
     "user_id": 1, 
     "description": "sdg", 
     "from": "asdf", 
     "to": "asdf", 
     "kmz": "12", 
     "kmp": "13", 
     "time": 0, 
     "hour": 0, 
     "maps": "www.blablabla.nl", 
     "created_at": null, 
     "updated_at": null 
     }, 
     { 
     "id": 2, 
     "user_id": 1, 
     "description": "asdf", 
     "from": "asdf", 
     "to": "asdf", 
     "kmz": "3", 
     "kmp": "1", 
     "time": 1, 
     "hour": 0, 
     "maps": "www.test.nl", 
     "created_at": null, 
     "updated_at": null 
     } 
    ] 
    } 
} 

--EDIT--

<div class="ride-item-content"> 
    <select v-model="ride.location_id"> 
    <option v-for="location in locations" v-bind:selected="$index === 0 ? 'selected' : false"> 
     {{ location.from }} - {{ location.to }} 
    </option> 
    </select> 
</div> 

Answer 1

VueJS 1：

<option v-for="location in locations" v-bind:value="location.id" v-bind:selected="$index === 0 ? 'selected' : false"> 
    {{ location.from }} - {{ location.to }} 
</option> 

VueJS 2：

<option v-for="(location, index) in locations" v-bind:value="location.id" v-bind:selected="index === 0"> 
    {{ location.from }} - {{ location.to }} 
</option> 

$indexは、v-forループ内で自動的に使用できます。

Vue 2では、インデックスの変数を明示的に宣言する必要があります。

Answer 2

@Jと似ています。それはあなたのために働いていないようだが、Bruniの答え。試してみてください：

<option v-for="location in locations" v-bind:value="location.id" v-bind:selected="$index === 0 ? true : false"> 
    {{ location.from }} - {{ location.to }} 
</option>