Vue: select input placeholder option disappears when I add v-model

user_4759176 0
Viewed 1021
<select
         class="cursoruser-pointer p-2 w-full rounded-full ">
    <option class="rounded-full "
            disabled selected value="">Language to learn</option>
    <option class="rounded-full">German</option>
    <option>Spanish</option>
    <option>English</option>
</select>

Shows

enter image description here

However if I add v-model = "selectedLanguage":

<select v-model = "selectedLanguage"
         class="cursoruser-pointer p-2 w-full rounded-full ">
    <option class="rounded-full "
            disabled selected value="">Language to learn</option>
    <option class="rounded-full">German</option>
    <option>Spanish</option>
    <option>English</option>
</select>

it stops showing the placeholder:

enter image description here

<script>
    ...

    export default {
        ...
        data: () => ({
                selectedLanguage: 'Language to Learn',
        }),
...

How do I fix it?

vue.js drop-down-menu css html
1 Answers

Your initial selectedLanguage value should be "" (empty string), since you specified the value of "Language to learn" option to be empty string (value=""). In addition to that, selected is not needed anymore since you are already using v-model

Demo: https://codesandbox.io/s/still-dawn-nu4m8?file=/src/App.vue

user_123972500
Related