從 FileInput 在 Vue.js 中加載微調器

Question

我有一個問題，我無法理解。 我在我的 web 應用程序中使用 Three.js，我想在上傳文件時添加一個加載微調器。 為此，我創建了一個帶有加載微調器的組件，並在加載文件時使用 v-if 顯示它。

奇怪的是，這不起作用，即使從 function 中記錄時值“loading”為真（當我在文件加載后記錄它時它再次為假而不更改它）。

代碼：

<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>

Answer 1

問題在於“this”的 scope 在 function 塊內，這意味着 this 不再是對 Vue 實例的引用。

使用沒有詞法 scope 的箭頭 function 並將最后一行更改為reader.readAsArrayBuffer( fileInput.files[0] ); 完成了工作。