title: Select always first value select vue.js
body: <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>