在 vue 选择输入中显示默认禁用的选定选项作为占位符

Question

我正在尝试创建一个带有选择的表单，其中包含从数据库中提取的一堆选项，还有一个选项将是一个占位符，会说“选择一个标题”之类的内容。

我遇到的问题是，虽然占位符选项确实被选中并被正确禁用，但在任何人单击它作为选定选项之前，它不会显示在实际输入列表中。

要求的行为：

在用户完全点击下拉菜单之前，他们应该会看到一个下拉菜单，其中包含显示“选择标题”的禁用项目的灰色文本。当他们点击下拉菜单时，他们可以从从数据库中抓取的标题列表中进行选择。

当前的错误行为：

在用户完全点击下拉菜单之前，他们会看到一个空的下拉菜单，其中没有任何内容或选择。一旦他们单击下拉菜单，即使文本未显示在输入框中（但显示在下拉菜单中），它也会显示当前已选择禁用选项，并且能够选择未禁用选项之一从数据库中提取。

我在这里做错了什么？我在网上找到了几件事，告诉我按照我现在的方式去做。这是我的代码：

<label for="TitleSelector">
   What do you want to edit?
</label>
<select name="TitleSelector" id="TitleSelector" v-model="selectedTitle">
   <option value="" disabled selected>Choose A Title</option>
   <option
    v-for="(title, index) in allTitles"
    :value="title"
    :key="index"
   >
     {{ title }}
   </option>
</select>

Answer 1

我知道了，如果我像这样 v-bind 禁用选项的值，它就可以工作：

<option :value="null" selected disabled>Choose A Title</option>