Select always first value select vue.js
<p>How do I always select the first item with a select (in vue.js)? </p>

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

<p><strong>json</strong></p>

<pre><code>{
  "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
      }
    ]
  }
}
</code></pre>

<p>--EDIT--</p>

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