如果 select 框是用 v-for 创建的，如何使用占位符？

Question

更新：

由于我自己的错误没有提及，tool 是在渲染期间在 v-for 循环中创建的，我无法应用建议的答案，尽管它们可能是正确的。

最后，我通过将以下 css sudo element 添加到 select 元素的父元素来解决此问题：

&::after {
  position: absolute;
  content: 'Paragraph';
  margin-right: .83rem;
  font-size: .83rem;
  place-self: center;
}

并在选择项目时将其设置为 display: none。

原题：

我在 v-for 的帮助下在 vue 3 中创建了一个 select 元素：

<template>
    <select v-model="tool.action" @change="selectType(tool.action)">
        <option v-for="option in options" :key="option" :value="option.value">{{ option.text }}</option>
    </select>
</template>

<script setup>
const options: [
    { text: 'Heading 1', value: 'h1' },
    { text: 'Heading 2', value: 'h2' },
    { text: 'Heading 3', value: 'h3' },
    { text: 'Paragraph', value: 'p' },
]
</script>

现在我想将 select box 中的 placeholder 文本设置为 Paragraph。通常它会像这样工作：

<select>
    <option value="p" selected>Paragraph</option>
</select>

但是 v-for 删除了手动设置 selected 的选项，那么我该怎么做呢？

Answer 1

A <select> 的 placeholder 通常被禁用并且不是可用选项之一。您可以使用 <option> before 您的 v-for of selectable <option>s:

<template>
    <select v-model="tool.action" @change="selectType(tool.action)">
        <option disabled value="">Placeholder Option</option> 
        <option v-for="option in options" :key="option" :value="option.value">{{ option.text }}</option>
    </select>
</template>

demo 1

如果你真的想设置<select>的初始值，你可以设置<select>的模型（即tool.action) 到所需的值：

<script setup>
⋮
tool.action = 'p' // initialize to 'Paragraph' option's value
</script>

demo 2

Answer 2

<template>
    <select v-model="tool.action" @change="selectType(tool.action)">
        <option value="p">Paragraph</option>
        <option v-for="option in options" :key="option" :value="option.value">{{ option.text }}</option>
    </select>
</template>

然后，将tool.action的默认值设置为“p”。

如果 select 框是用 v-for 创建的，如何使用占位符？

How to use placeholder in select box if it is created with v-for?

html

javascript

vue.js

vuejs3