Vue: getting default value for select when using objects

Question

I have a select where I am trying to set the :selected value to data from my server on page load. All the data is accessible but I am not sure what I am missing. My prop customer is an object that is passed in from the parent and comes from the backend. The value of customer.state is the abbreviated state , so "CA" for example. I tried doing :selected="this.customer.state" but that didn't work either.

data() {
    return {
        this.states = [
             {text: "California", value: "CA"},
             {text: "New Jersey", value: "NJ"},
             //etc
        ],
    }
},
props: {
    customer: {type: Object}
}


<select name="state" autocomplete="address-level1" @change="optionDropdown">
    <option v-for="x in optionsReturned" :value="x.value" :selected="???">
      {{ x.text }}
    </option>
</select>

Renaud · Accepted Answer · 2020-05-19 23:49:16Z

1

value of selected must be true when the currently looped option is equal to customer's state (and false otherwise): :selected="customer.state === x.value"

answered May 19, 2020 at 23:49

Renaud

1,3098 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

Vue: getting default value for select when using objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related