Cuando hago clic en un botón, se mostrará el modal. El modal contiene un campo de entrada. Quiero establecer el enfoque en el campo de entrada dentro del modal cuando el modal aparece después de hacer clic.
Este es el botón, así que cuando hago clic en él, se muestra el modal,
<div class="manu-bar-card" @click=" () => { groupHandler.addNewgroupModal = true; newGroupName.focus(); }" > Este es mi modal (Esto se mostrará si groupHandler.addNewgroupModal es true ),
<div class="modal-container" v-if="groupHandler.addNewgroupModal"> <input ref="newGroupName" type="text" /> </div>Este es el campo de entrada dentro del modal. Le he establecido un atributo de referencia,
<input ref="newGroupName" type="text" /> He registrado esa referencia dentro de mi <script setup> y el objeto reactivo para mostrar/ocultar modal,
const newGroupName = ref(); const groupHandler = reactive({ addNewgroupModal: false, });Creo que la razón para no enfocarse en el campo de entrada es que el modal aún no está montado cuando se llama al método de enfoque. Cómo manejar tal cosa. Se lo agradezco si alguien pudiera ayudar. Gracias
Su modal debe ser un componente separado.
Llamémoslo <Modal v-if="groupHandler.addNewgroupModal" />
Dentro del componente Modal , puede hacer una ref para su entrada, y en la función onMounted , puede llamar a newGroupName.value.focus()
Si no desea separar el modal en un componente separado por algún motivo.
Puedes usar nextTick
<div class="manu-bar-card" @click="clickHandler" > Y en el script de setup .
<div class="manu-bar-card" @click=" () => { groupHandler.addNewgroupModal = true; newGroupName.focus(); }" > Y en su script de setup .
import { nextTick } from 'vue' const clickHandler = async () => { groupHandler.addNewgroupModal = true; await nextTick() newGroupName.value.focus(); }