始终选择第一个值 select vue.js [英] Select always first value select vue.js

问题描述

如何始终使用 select 选择第一项(在 vue.js 中)?

<select v-model="ride.location_id"><option v-for="location in location" v-bind:value="location.id">{{ location.from }} - {{ location.to }}</选项></选择>

json

<代码>{位置":{总计":2，每页":20，当前页面":1，最后一页":1，next_page_url":空，prev_page_url":空，来自":1，到":2，数据": [{身份证":1，用户 ID":1，"描述": "sdg","from": "asdf","to": "asdf","kmz": "12","kmp": "13",时间":0，小时":0，"地图": "www.blablabla.nl",created_at":空，updated_at":空},{身份证":2，用户 ID":1，"描述": "asdf","from": "asdf","to": "asdf","kmz": "3","kmp": "1",时间":1，小时":0，"地图": "www.test.nl",created_at":空，updated_at":空}]}}

--编辑--

<select v-model="ride.location_id"><option v-for="location in location" v-bind:selected="$index === 0 ? 'selected' : false">{{ location.from }} - {{ location.to }}</选项></选择>

解决方案

VueJS 1:

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

VueJS 2:

{{ location.from }} - {{ location.to }}</选项>

在 Vue 1 中，$index 在 v-for 循环内自动可用.

在 Vue 2 中，您需要为索引显式声明一个变量.

How do I always select the first item with a select (in 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>

解决方案

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>

In Vue 1, $index is automatically available inside v-for loops.

In Vue 2, you need to explicitly declare a variable for the index.

这篇关于始终选择第一个值 select vue.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！