Using v-select dropdown for default value

Question

I have a dropdown using the v-select component and setting my options as "US" and "CANADA".

I want to set the default value (:value)to read off of customer.country_code, which is set to "US" in this case but it doesn't have the preloaded selection. I have use v-select in similar instances but not sure what I'm messing up here.

<v-select
   :options="['US', 'CA']"                                   
   :value="customer.country_code"                                       
   v-model="defaultCountry"
</v-select>

The v-model defaultCountry is initiated like this:

data() {
   return {
       defaultCountry: null
  }
},

props: {
    customer: { type: Object }
}

The customer.country_code is a prop so I can't instantiate the v-model to that value.

at what point do I make defaultCountry equal to that? I don't believe the prop is accessible at the `data() { } ` point — cmcmnooe, Apr 18 '19 at 16:05
it is, you can just use `defaultCountry: this.props.customer.country_code` — Derek Pollard, Apr 18 '19 at 16:06
@DerekPollard weirdddd -- it doesn't work as `defaultCountry: this.props.customer.country_code` but works as `defaultCountry: this._props.customer.country_code` . Why would that be?? — cmcmnooe, Apr 18 '19 at 16:09
That is really odd, it should work like this: https://stackoverflow.com/a/40435856/2020002 — Derek Pollard, Apr 18 '19 at 16:12
I put a `debugger` in the data() section and in console, I typed `this._` and the options are `this._isMounted`, `this._isVue`, `this._props`, `this_self`, `this._watcher`, and a few others. Even trying to type `this.props` autocorrects to `this._props`. Trying `this.props` comes back as undefined. — cmcmnooe, Apr 18 '19 at 16:16

score 0 · Answer 1 · answered Apr 18 '19 at 15:59

0

v-select as in vuetify component?

your v-model should have the value 'US' and that will be the first selected item

answered Apr 18 '19 at 15:59

Ninth Autumn

461
1
5
10

yea, vuetify component -- sorry. I am going to edit my question with a reply^ – cmcmnooe Apr 18 '19 at 16:02

score 0 · Answer 2 · answered Apr 19 '19 at 07:17

dropdown.vue:

<select v-model="country">
  <option value="0">US</option>
  <option value="1">CANADA</option>
</select>

dropdown.js

In data declare this v-model.
country: 0

Then the default value "US" will be preselected in dropdown.

This is my first answer on stack overflow..hope it helps. ThankYou

Using v-select dropdown for default value

2 Answers2