CODEWITHSUNDEEP
vue.js
Evaldas Butkus
Evaldas Butkus

Reputation: 665

Vue js recognize selected option

I have cities object which contains city.name and city.id. Also I have cameras object which has city_id: cameras.city_id. In my html:

<div v-for="camera in cameras">
    <select v-model="camera.city_id" class="form-control">
        <option v-for="city in cities" selected>@{{ city.name }}</option>
    </select>
</div>

I have to recognize which element of object should be marked as selected, simply said mark element as selected if city.id == camera.city_id. It will be true only once per loop. How do I manage that? Thanks.

Upvotes: 0

Views: 178

Answers (1)

David K. Hess
David K. Hess

Reputation: 17246

You should be using value on the options like this:

<div v-for="camera in cameras">
    <select v-model="camera.city_id" class="form-control">
        <option v-for="city in cities" :value="city.id">@{{ city.name }}</option>
    </select>
</div>

Done that way, the proper option will automatically be selected for you by the v-model directive.

See this for more information: http://vuejs.org/guide/forms.html#Select

Upvotes: 1

Related Questions