Vue：select 输入占位符选项在我添加 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

Vue：select 输入占位符选项在我添加 v-model 时消失

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

html

css

drop-down-menu

vue.js