En mi aplicación, el icono de mi precargador no parece desaparecer cuando hago clic en un botón que redirige a una nueva página. Como soy nuevo en Vue, ¿qué podría hacer para que el ícono desaparezca una vez que la página se vuelva a mostrar?
<template> <div class="page-loader" v-if="!isloaded"> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> </div> </template> <script> export default { data: () => { return { isloaded: false } }, mounted() { document.onreadystatechange = () => { if (document.readyState == "complete") { this.isloaded = true; } } }, } </script>el montaje parece funcionar inicialmente, pero luego de eso, ¿no funciona una vez que se redirige en la página?
Creo que no necesita el onreadystatechange de estado listo ya que el estado listo completed no está relacionado si los datos se han obtenido o no. Para detener el precargador después de obtener datos de la API, usaría el ciclo de vida created .
Ex:
data() { return { isloaded: false, data: null, } }, async created() { // any fetch method ( fetch or axios ) const response = await fetch('API_URL') const data = await response.json() // set the data this.data = data; // here we ensure that data fetched, we can stop preload this.isloaded = true; },