始终选择第一个值选择 vue.js答案

【问题标题】：Select always first value select vue.js始终选择第一个值选择 vue.js
【发布时间】：2016-09-23 19:37:25
【问题描述】：

我如何总是选择带有选择的第一个项目（在 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
      }
    ]
  }
}

--编辑--

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

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

在您的 json 中我找不到 location.id。而你的"locations" 是obj。但是如果"locations" 是arr，你可以使用这个：

  <select v-model="selectedLocation">
    <option v-for="location in locations" :key="location.id" :value=location.id>
      {{ location.somekey }}
    </option>
  </select>

在数据中 -

selectedLocation: this.locations.length ? this.locations[0].id : ''

它可以工作，因为您的选择取决于 selectedLocation (v-model)。

【讨论】：

你的解决方案不起作用它给我无法读取未定义的属性'.....'，似乎数据的工作方式有所不同

【解决方案2】：

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>

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

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

【讨论】：

谢谢，但它不起作用？我使用 vueJS 1。请参阅我的编辑。
如果你在选择上使用v-model，vuejs 2 的解决方案将不起作用。请参阅this docs中的第一个注释
:selected 和 :value 在 VueJS v2 中也是正确的 :)
@Choma 在这种情况下，您如何在选择上使用 v-modal 并且默认为要选择的索引上的第一个？从引用的链接不确定。谢谢
@raison，我想可能有几种方法可以做到这一点，但here is an easy one

【解决方案3】：

您可以在 select 中使用 v-model ，当您加载列表时，将第一个值传递给模型变量，并且始终会选择第一个值

【讨论】：

【解决方案4】：

类似于@J。布鲁尼的回答虽然这似乎对你不起作用。试试这个：

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

【讨论】：

【解决方案5】：

created(){
    if(this.locations) {
        this.ride.location_id = this.locations[0].id
    }
}

工作示例 jsfidlle 链接 https://jsfiddle.net/Rashid_Bukhari/q2ro6pz1/20/

你只需要将 v-model ride.location_id 更新为 vuejs created(){} 或 mounted(){} 方法

【讨论】：