En mi aplicación Nuxt/Vue con Tailwind, al hacer clic en un element estoy descubriendo el siguiente element . Funciona bien, pero el usuario debe desplazarse hacia abajo para ver el nuevo elemento. ¿Cómo puedo hacer que mi aplicación vaya directamente al final de la página para ver el nuevo elemento sin desplazarse hacia abajo?
<template> <div @click="onClick"> <Element/> </div> <div v-if="Section > 0" @click="onClick"> <Element/> </div> <div v-if="Section > 1" @click="onClick"> <Element/> </div> </template> <script> export default { data() { return { Section: 0 } }, methods: { onClick() { this.Section++ } </script>Puede hacerlo haciendo referencia a los divs y luego usando window.scrollTo para desplazarse hasta ellos (o en la parte inferior de la página).
Solo un ejemplo de cómo puedes hacerlo (tu código modificado):
<template> <div @click="onClick('section0')" ref="section"> <Element/> </div> <div v-if="Section > 0" ref="section0" @click="onClick('section1')"> <Element/> </div> <div v-if="Section > 1" ref="section1" @click="onClick('nextSectionRef')"> <Element/> </div> </template> <script> export default { data() { return { Section: 0 } }, methods: { onClick(refName) { this.Section++; var element = this.$refs[refName]; var top = element.offsetTop; window.scrollTo(0, top); } </script>Esto te ayudará a entenderlo mejor: https://shouts.dev/vuejs-scroll-to-elements-on-the-page
Esto también podría responder a su pregunta:desplácese hasta la parte inferior de div con Vue.js