Set default value to option select menu

Question

I want to bind a custom attribute to an option select menu. The <option> tag would simply have an attribute of selected="selected"

<template>
  <div>
    <select>
      <option v-for="" v-bind:selected="[condition ? selected : notSelected]" value="">{{ resource.xprm_name }}</option>
    </select>
  </div>
</template>

data: {
  selected: "selected",
  notSelected: ""
}

This does not work, but if I change v-bind:selected to v-bind:class then it receives the appropriate class, so the logic is working, but not with the selected attribute.

Any way to make it work with such custom attributes?

craig_h · Accepted Answer · 2016-12-13 14:03:20Z

107

You can just use v-model for selecting a default value on a select box:

Markup:

<div id="app">
  <select v-model="selected">
     <option value="foo">foo</option>
     <option value="bar">Bar</option>
     <option value="baz">Baz</option>
  </select>
</div>

View Model:

new Vue({
  el: "#app",
  data: {
    selected: 'bar'
  }
});

Here's the JSFiddle: https://jsfiddle.net/Lxfxyqmf/

answered Dec 13, 2016 at 14:03

craig_h

32.8k7 gold badges61 silver badges70 bronze badges

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

4 Comments

Chris22 Over a year ago

How can you use this in the data(){} function? Nothing I have tried has worked and i have looked through several threads here on SO using several different ways and the VueJs2 docs. Select Basic Usage

Dev 404 Over a year ago

@Chris22 Should just be data: function () { return { selected: 'bar' } }

ejntaylor Over a year ago

How would you achieve this if you wanted to select the first index only. Ie. you don't know the results returned, so just auto-select the first result.

Dr.J Aug 5 at 18:54

This answer is very helpful for me. I'm using Vue Js 3 and I had the bound value set to ref(0). My list of options started with a value of 1. I overlooked my initial bound variable initialization and kept trying to tweak the "selected" attribute on the html component.

Delphin RUKUNDO · Accepted Answer · 2020-05-30 13:09:41Z

11

html:

<div id="myComponent">
    <select v-model="selectedValue">
        <option v-for="listValue in valuesList" :value="listValue">
            {{listValue}}
        </option>
    </select>
    <span>Chosen item: {{ selectedValue }}</span>
</div>

js:

var app = new Vue({
    el: '#myComponent',
    data: {
        selectedValue: 'Two',
        valuesList: ['One', 'Two', 'Three']
    },

edited May 30, 2020 at 13:09

Delphin RUKUNDO

6636 silver badges8 bronze badges

answered May 27, 2019 at 16:09

Ilya Kolesnikov

6528 silver badges17 bronze badges

2 Comments

Gustavo Straube Over a year ago

This answer can be considered right when you simply want to have a value selected by default and don't want to use v-model.

Joel G Mathew Over a year ago

@GustavoStraube Even if you use v-model, I dont see it selecting a default option. Using this along with v-model works in selecting a default

Arkox · Accepted Answer · 2021-07-07 23:32:59Z

I have created a reusable component of select that also emits the modelValue to parent component.

If you look at the first option tag, you can see how I create a default value using props.

BaseSelect.vue (child component)

<template>
  <label v-if="label">{{ label }}</label>
  <select
    class="field"
    :value="modelValue"
    v-bind="{
      ...$attrs,
      onChange: ($event) => {
        $emit('update:modelValue', $event.target.value);
      },
    }"
  >
    <option value="" disabled>{{ defaultValue }}</option>
    <option
      v-for="option in options"
      :key="option"
      :value="option"
      :selected="option === modelValue"
    >
      {{ option }}
    </option>
  </select>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: ""
    },
    defaultValue: {
      type: String,
      default: "Select an item of the list",
      required: false
    },
    modelValue: {
      type: [String, Number],
      default: "Otros"
    },
    options: {
      type: Array,
      required: true
    },
  },
};
</script>

Parent component

<BaseSelect
      label="Asunto"
      defaultValue = "Selecciona un asunto" 
      v-model="contactValues.asunto"
      :options="asuntos"
    />

Notice that you have to receipt correctly this value in your data() (v-model)

Dominik Bisiakowski · Accepted Answer · 2022-02-22 13:36:06Z

0

Using the new composition API:

<template>
     <select v-model="selectValue">
         <option value="a">
             Option a
         </option>
         <option value="b">
             Option b
         </option>
      </select>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        // Create a reactive value for our select
        const selectValue = ref('a');

        // Return to the template
        return { selectValue };
    },
};
</script>

edited Feb 22, 2022 at 13:36

answered Feb 8, 2021 at 15:15

Dominik Bisiakowski

4394 silver badges6 bronze badges

1 Comment

derekbaker783 Over a year ago

The question is tagged Vue2 (although technically the composition API can be used with that version)

user28303757 · Accepted Answer · 2024-11-14 21:09:26Z

0

So I'm not sure if this has been resolved but I just wanted to add another option here.

<select v-model="selectedOffice" class="select-style">
    <option v-for="(office_id) in OID"
    :key="office_id">
    {{ office_id.office_name }}
    </option>
  </select>

JS:

if (this.OID.length < 2) {
    this.selectedOffice = this.OID[0].office_name;
    this.officeID = this.OID[0].office_id;
  }

So in this situation, I set the v-model variable to the first option in the array if there is only one option in the array. The concept though is the same if there are more options.

answered Nov 14, 2024 at 21:09

user28303757

1

Collectives™ on Stack Overflow

Set default value to option select menu

5 Answers 5

4 Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related