Vue.js中选择框占位符/默认提示不显示，求简单解决办法

你的问题出在v-model初始值与占位符选项的value不匹配：你给attending设的初始值是"RSVP"，但占位符选项的value是空字符串""，Vue会根据v-model的值匹配对应的选项，导致初始时找不到匹配项，默认选中的效果失效。

直接按以下步骤修改即可：

修改后的模板代码 #

<select v-model="attending" name="attending" id="attending" required>
    <option value="" disabled>RSVP here</option>
    <option v-for="option in options" v-bind:value="option.id">
        {{ option.name }}
    </option>
</select>
<template v-if="attending === 1">
    <textarea name="message" v-model="message" cols="30" rows="5"
        placeholder="Please mention any dietary requirements you may have">
    </textarea>
    <p>We would also love for you to have a say on what music plays to get you on the dancefloor. Please
        feel free to suggest 1 or 2 options below:</p>
    <input type="text" v-model="songone" name="songone" placeholder="Your first song choice">
    <input type="text" v-model="songtwo" name="songtwo" placeholder="Your second song choice">
    <p>Finally, can you please enter the password found on your invitation before submitting:</p>
    <input type="password" v-model="password" name="password" placeholder="Enter password" required>
</template>

修改后的data部分 #

data() {
    return {
        enteredPassword: '',
        errorMessage: '',
        attending: "", // 改为空字符串，匹配占位符选项的value
        options: [
            { id: 1, name: 'I will be there' },
            { id: 2, name: 'Sadly, I am unable to attend' }
        ]
    }
},

说明 #

1. 把attending初始值设为""，和占位符选项的value=""对应，Vue会自动选中这个选项作为初始状态
2. 保留disabled属性，防止用户选中这个占位符选项（不需要加selected，Vue会通过v-model自动处理选中状态）
3. 浏览器对select标签的placeholder属性支持很差，用disabled的空value选项做占位符是标准且可靠的方案

内容的提问来源于stack exchange，提问作者Alan_f_1979