Tengo un problema que no puedo entender. Estoy usando Three.js en mi aplicación web y quiero agregar una rueda de carga cuando subo un archivo. Para eso, creé un componente con el indicador giratorio de carga y lo mostré con v-if cuando se carga el archivo.

Por extraño que parezca, esto no funciona, aunque el valor "cargando" es verdadero cuando se registra desde dentro de la función (cuando lo registro después de cargar el archivo, es falso nuevamente sin cambiarlo).

El código:

 <template> <div class="button-draw-container"> <input id="file-input" name="button-upload" type="file" @click="importFile"/> </div> <div v-if="loading" id="wrapper-loader"> <Loader/> </div> </template> <script> export default { components: { Loader }, data() { return { loading: false, } }, methods: { importFile() { var fileInput = document.querySelector("#file-input"); var cores = []; var outline; fileInput.addEventListener("change", function(event) { //This is the part that's not working this.loading = true; console.log(this.loading) const reader = new FileReader(); reader.addEventListener("load", function(event) { const contents = event.target.result; const loader = new Rhino3dmLoader(); loader.setLibraryPath( 'https://cdn.jsdelivr.net/npm/three@0.138.2/examples/jsm/libs/rhino3dm/' ); loader.parse( contents, function( object ) { for (let i = 0; i < object.children.length; i++) { if(object.children[i].userData.attributes.layerIndex == 1) { cores.push(object.children[i].geometry); } else if(object.children[i].userData.attributes.layerIndex == 2) { outline = object.children[i].geometry; } } } ); }); reader.readAsArrayBuffer( this.files[0] ); }) }, } </script>