Vue3中v-for渲染select下拉框时如何设置占位符

此前未说明tool是渲染阶段通过v-for循环生成的，之前收到的方案本身逻辑正确，但无法直接适配当前场景。

最终采用的变通实现方案如下：在select元素的父元素上添加CSS伪元素：

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

当检测到有选项被选中时，将该伪元素设置为display: none即可达到预期效果。

在Vue 3项目中通过v-for渲染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选择框的占位文本设置为Paragraph，原生HTML的常规实现方式是给对应option添加selected属性：

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

但在使用v-for渲染所有选项的场景下，无法手动给单个option添加selected属性，需要找到可行的实现方式。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov