Actualizar:
Debido a mi propia culpa de no mencionar, esa tool se crea en un bucle v-for durante el renderizado, no pude aplicar las respuestas propuestas aunque podrían haber sido correctas.
Al final, hice una solución agregando el siguiente css sudo element al padre del elemento select :
&::after { position: absolute; content: 'Paragraph'; margin-right: .83rem; font-size: .83rem; place-self: center; } y configurarlo para que display: none , cuando se selecciona un elemento.
Pregunta inicial:
Estoy creando un elemento de select en vue 3 con la ayuda de v-for :
<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> Ahora quiero establecer un texto de placeholder de posición en el select box en Paragraph . Por lo general, funcionaría así:
<select> <option value="p" selected>Paragraph</option> </select> pero v-for elimina la opción de configuración selected manualmente, entonces, ¿cómo lo hago?
El marcador de posición de <select> generalmente está deshabilitado y no es una de las opciones disponibles. Puede hacerlo con una <option> antes de su v-for de <option> seleccionables:
<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> Si realmente desea establecer el valor inicial de <select> , puede establecer el modelo de <select> (es decir, tool.action ) en el valor deseado:
<script setup> ⋮ tool.action = 'p' // initialize to 'Paragraph' option's value </script><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>y luego, establezca el valor predeterminado de tool.action en "p".