vue.js v-select default value

Question

I want to make a default value of the select option using vue.js

here is my code

 <v-select
        v-model="contact.title"
        :options="['Mr','Mrs','Ms']">
      </v-select>

and

export default {
 props: {
  contact: {
  type: Object,
  required: true,
 },

titles: {
     type: Array,
     required: true,
   },
  },
};

thanks

Just set a default value for the title field of the contact object passed as prop. — gugadev
– gugadev, Commented Jan 10, 2019 at 17:13
You have to set the the value of contract.title to one of the values from the array ['Mr','Mrs','Ms'] — ljubadr
– ljubadr, Commented Jan 10, 2019 at 17:14
this will fire an error, since props don't support two ways binding — Boussadjra Brahim
– Boussadjra Brahim, Commented Jan 10, 2019 at 17:16

Bhaskararao Gummidi · Accepted Answer · 2019-01-28 11:40:21Z

4

Try this.I think this will work.

<v-select
  v-model="selected"
  :options="options">
</v-select>


data: () {
  return {
    selected: 'Option 1',
    options: ["Option 1","Option 2","Option 3"]
  }
},

answered Jan 28, 2019 at 11:40

Bhaskararao Gummidi

2,5931 gold badge14 silver badges15 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 22:29:34Z

3

Mutating a prop is not best practice in vue. You could do it like:

<v-select
    v-model="selected"
    :options="['Mr','Mrs','Ms']">
</v-select>


data: function () {
  return {
    selected: '' || 'defaultValue'
  }
},

This way you are not mutating the prop and you easily can set a default value.
If you want to pass the data to the parent look at:
Pass data to parent

edited Jul 15, 2022 at 22:29

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 10, 2019 at 17:33

mava

2,8941 gold badge13 silver badges17 bronze badges

2 Comments

mava Over a year ago

What is not working? The default value? Do you have any errors in the console?

Tessa Muliawati Over a year ago

yes the default value can't display, nothing errors in the console

Collectives™ on Stack Overflow

vue.js v-select default value

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related