<div class="app__land-bottom" v-if="isVisible"> <a href="#projects"> <img ref="arrowRef" id="arrow" src="./../assets/down.png" alt srcset /> </a> </div>En Vue3, la configuración no funciona, pero en Vue2 funciona la siguiente solución para no mostrar un botón basado en el desplazamiento.
VUE3 <script setup> import { ref, onMounted, onUnmounted } from "vue"; let isVisible = ref(false); onMounted(() => { window.addEventListener("scroll", () => { hideArrow(); }); }); onUnmounted(() => { window.removeEventListener("scroll", () => { hideArrow(); }); }); const hideArrow = () => { const currentScroll = window.pageYOffset; if (currentScroll > 100) { isVisible = false; } else if (currentScroll < 100) { isVisible = true; } } </script> VUE2 <script> export default { created() { window.addEventListener('scroll', this.hideArrow) }, data() { return { isVisible: false, } }, methods: { hideArrow() { const currentScroll = window.pageYOffset; if (currentScroll > 100) { this.isVisible = false; } else if (currentScroll < 100) { this.isVisible = true; } }, }, } </script>En vue2 la solución funciona pero en Vue3 no. ¿Alguna sugerencia? No entiendo exactamente donde esta el problema? Sería útil una respuesta.
al mutar su referencia: isVisible , debe escribir: isVisible.value en lugar de isVisible
su función hideArrow debería ser:
const hideArrow = () => { const currentScroll = window.pageYOffset; if (currentScroll > 100) { isVisible.value = false; } else if (currentScroll < 100) { isVisible.value = true; } }para más detalles: consulte los documentos de referencia en Vue