时间戳

首页 > 解决方案 > Vue：当我添加 v-model 时，选择输入占位符选项消失

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

问题描述

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

我如何解决它？

标签： htmlcssvue.jsdrop-down-menu

解决方案

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

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

推荐阅读