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

Question

<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>

节目

但是，如果我添加 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>

它停止显示占位符:

<script>
    ...

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

我如何解决它？

Answer 1

您的初始 selectedLanguage值应为 "" (空字符串)，因为您将“Language to learn”选项的值指定为空字符串( value="" )。除此之外，selected不再需要，因为您已经在使用 v-model演示:https://codesandbox.io/s/still-dawn-nu4m8?file=/src/App.vue