CODEWITHSUNDEEP
vue.jsvue-componentvuejs3
Kim Andersen
Kim Andersen

Reputation: 1915

Vue 3 does not select the first option in a select as the default one

I have a Vue3 application, where I'm showing some select boxes. The options are we getting from JSON data. Except the first option in the select, which is a default one with a text for the users to see. My issue is that when the page is loaded, the first option is not shown in the select box.

A select box of mine could look like this inside my vue template section:

<template>
    <div>
        <select v-model="selectModel" @change="changeSelect">
            <option>Select option</option>
            <option v-for="item in props.options" :value="item.value" :key="item.value">{{ item.text }}</option>
        </select>
    </div>
</template>

The data I get for the options comes as such:

<script type="application/json" data-state="@guid">
        {
           "data": {
               "options": [
                   {"value": "1", "text": "Option 1 title"},
                   {"value": "2", "text": "Option 2 title"}
                ]
            }
        }
</script>

And it's defined in the vue-file as such:

interface Props {
    options: { value: number; text: string }[] | null;
}
const props = defineProps<Props>();

When the page is rendered, the select box is there, with the three options. So what I would like to achieve is that the first option with the text "Select option" is shown when the user loads the page. Right now, no option is selected, and therefor the text in the select is just empty.

Anyone have a clue on what to do? I have tried searching and tried different stuff like setting a selected-attribute on the first option and such, but nothing seems to help.

Thanks in advance.

Upvotes: 0

Views: 310

Answers (2)

Neha Soni
Neha Soni

Reputation: 4704

Set the initial value of selectModel null and give your first option element a null value, like- <option value="null">Select option</option> and it would be select automatically.

const { createApp, ref} = Vue;

const app = {
  setup(){
    const options = ref([
      {"value": "1", "text": "Option 1 title"},
      {"value": "2", "text": "Option 2 title"},
    ])
    const selectModel = ref(null)
    return {options, selectModel}
  }
}
createApp(app).mount('#app')
<div id="app" class="d-flex justify-center">
  <div>
    <div>
      <select v-model="selectModel" @change="changeSelect">
        <option value="null">Select option</option>
        <option v-for="item in options" :value="item.value" :key="item.value">{{ item.text }}</option>
      </select>
    </div>
  </div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

Upvotes: 1

Moritz Ringler
Moritz Ringler

Reputation: 15931

You could just add the "Please select" text to an option with value null, so it is selected by default:

const { createApp, ref} = Vue;

const app = {
  setup(){
    const options = ref([
      {"value": null, "text": "Please select", disabled: true},
      {"value": "1", "text": "Option 1 title"},
      {"value": "2", "text": "Option 2 title"},
    ])
    const selected = ref(null)
    return {options, selected}
  }
}
createApp(app).mount('#app')
<div id="app" class="d-flex justify-center">
  <div>
    <select v-model="selected">
      <option
        v-for="item in options" 
        :value="item.value" 
        :key="item.value" 
        :disabled="selected && item.disabled"
      >
      {{ item.text }}</option>
    </select>
    <div>Selected: {{ selected ?? 'null' }}</div>
  </div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

Upvotes: 1

Related Questions