Vue：当我添加 v-model 时，选择输入占位符选项消失答案

【问题标题】：Vue: select input placeholder option disappears when I add v-modelVue：当我添加 v-model 时，选择输入占位符选项消失
【发布时间】：2020-08-21 19:24:11
【问题描述】：

<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',
        }),
...

我该如何解决？

【问题讨论】：

标签： html css vue.js drop-down-menu

【解决方案1】：

您的初始 selectedLanguage 值应为 ""（空字符串），因为您将“Language to learn”选项的值指定为空字符串 (value="")。除此之外，不再需要selected，因为您已经在使用v-model

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

【讨论】：