CODEWITHSUNDEEP
vue.js
yoyoma
yoyoma

Reputation: 3536

Vuejs how to select option via model

I have a few select dropdowns, one of which looks like this

<div class="col-sm-5">
          <select class="form-control sale-required" id="seller" name="staff-seller" v-model="seller">
            <option selected disabled :value="null">- Select -</option>
            <option v-for="aStaff in staff" :value="aStaff.id">{{aStaff.initials}}</option>
          </select>
        </div>

As you can see, the v-model is bound here.

In the vuejs section, the data is set

export default {
    data: function() {
       return {
           seller: null
       }
    },

    props: {
       sale: {
           type: Object,
           required: true
       }
    },

    mounted() {
       this.seller = this.sale.seller;
    }

So this.seller is correctly getting the data via the props, i can see that working ok.

However the select option is not being selected as I would expect, once its mounted and model is set.

Am I missing something ?

Upvotes: 0

Views: 530

Answers (1)

riyaz-ali
riyaz-ali

Reputation: 9102

add :selected="aStaff.id == sale.seller.id" on option
You can replace id with some other key that you have.

Upvotes: 2

Related Questions