Select always first value select vue.js

Question

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>

J. Bruni · Accepted Answer · 2016-09-23 20:15:28Z

11

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.

answered Sep 23, 2016 at 20:15

J. Bruni

20.5k13 gold badges80 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jamie Over a year ago

Thankyou, but it's not working? I use vueJS 1. Please see my edit.

Choma Over a year ago

The solution for vuejs 2 won't work if you are using v-model on the select. See first note in this docs

MBouwman Over a year ago

:selected and :value are also correct in VueJS v2 :)

ejntaylor Over a year ago

@Choma in that case how do you use v-modal on the select and also default to first on the index to be selected? Not sure from the referenced link. Thanks

Choma Over a year ago

@raison, I guess there may be several ways to do this, but here is an easy one

|

Paradowski · Accepted Answer · 2018-06-28 11:00:38Z

4

In your json I cant find location.id. And your "locations" is obj. But if the "locations" is arr, you can use this:

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

in data -

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

It can work because your select depends on selectedLocation (v-model).

edited Jun 28, 2018 at 11:00

Paradowski

7171 gold badge13 silver badges17 bronze badges

answered Jun 28, 2018 at 9:43

coppolla

412 bronze badges

1 Comment

Adelin Over a year ago

you solution doesn't work it give me Cannot read property ' ..... ' of undefined, seems that data work some differently

James McGuigan · Accepted Answer · 2020-07-11 12:33:01Z

2

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

working example jsfidlle link https://jsfiddle.net/Rashid_Bukhari/q2ro6pz1/20/

you just need to update your v-model ride.location_id into vuejs created(){} or mounted(){} method

edited Jul 11, 2020 at 12:33

James McGuigan

8,1464 gold badges30 silver badges30 bronze badges

answered Jul 11, 2020 at 8:52

Rashid Bukhari

313 bronze badges

Comments

Nico JL · Accepted Answer · 2019-02-07 00:57:09Z

1

You can use v-model in your select , when you load your list pass first value to a model variable and always first value will be selected

answered Feb 7, 2019 at 0:57

Nico JL

4293 silver badges6 bronze badges

Comments

Y. Chen · Accepted Answer · 2016-09-24 03:22:12Z

0

Similar to @J. Bruni's answer although that seemed to not work for you. Try this:

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

answered Sep 24, 2016 at 3:22

Y. Chen

11 bronze badge

Collectives™ on Stack Overflow

Select always first value select vue.js

5 Answers 5

6 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related