Tengo un componente TopNavBar , que está presente en todas las rutas. Este componente incluye un campo de entrada de búsqueda. Cuando un usuario hace clic en el campo de entrada, la ruta cambia de /bar a /foo pero se pierde el foco de entrada. ¿Cómo puedo (re) concentrarme en la entrada?
TopNavBar.vue
<template>
<input type="search" name="search-library" v-focus ref="searchInput" @focus="initSearch". />
</template>
<script setup>
const searchInput = ref(null);
<input type="search" name="search-library" v-focus ref="searchInput" @focus="initSearch". />
function initSearch() {
if (router.currentRoute.value.name != "/foo") {
router.push({ path: "/foo", query: { initSearch: true }, key: route.fullPath });
}
}
watch(
() => router.currentRoute.value.path,
(newRoute) => {
if (newRoute == "/foo") {
searchInput.value.focus();
}
}
);
</script>
Estoy usando Vue3 y Nuxt3. v-focusz directive is declared globally in la carpeta /plugins` y funciona como se esperaba.
Actualizar
TopNavBar está dentro del diseño de Nuxt 3. Además, después de una investigación más profunda, me di cuenta de que la entrada se enfoca en el cambio de ruta, pero la vuelve a perder inmediatamente.
Puede lograr esto usando $refs , adjunte una referencia en el elemento de entrada y luego llame al método de enfoque en él.
En plantilla:
<parent-component>
<search-component ref="searchComponentRef" />
</parent-component>
En guión:
mounted() {
this.$refs.searchComponentRef.$el.focus();
}