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

Question

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.

Answer 1

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>