Vuejs2 vue2数据更改不更新视图

我有一个简单的文件上传组件FileUpload.vue

<template>
<div>
    <input type="file" name="file" id="file" v-on:change="handleFileUpload()" ref="file">
    <button class="btn shadow-lg first" @click="addFiles()">SELECT FILE</button>
    <button class="btn shadow-lg" v-on:click="handleSubmit()">UPLOAD</button>
    <p> {{uploadPercentage}} </p>

</div>
</template>

<script>
import axios from 'axios';

export default {
name: 'FileUpload',
data() {
    return {
        file: '',
        uploadPercentage: 0

    }
},

methods: {
    handleFileUpload: () => {
        this.file = document.getElementById('file').files[0];
    },
    addFiles: () => {
        document.getElementById('file').click();
    },
    handleSubmit: () => {
        let formData = new FormData();
        formData.append('file', this.file);
        axios.post('/file/create',
        formData,
        {
            headers: {
                'Content-Type': 'multipart/form-data'
            },
            onUploadProgress: (progressEvent) => {
                console.log(this.uploadPercentage);
                this.uploadPercentage = parseInt(Math.round(progressEvent.loaded * 100 / progressEvent.total));
            }
        }
        )
        .then((response) => {
            console.log(response.data);
        })
        .catch((error) => {
            console.log(error);
        })
    }
}
}
</script>

但在我看来，上传百分比从未改变。它始终显示初始值0

<p> {{uploadPercentage}} </p>

{{uploadPercentage}

我做错了什么

---

提前感谢。

问题在于，您不应该在Vue实例定义中使用箭头函数作为方法，因为否则方法中的

此

将不会指向Vue实例本身，并且您将无法访问

数据

属性。您可以检查解决问题的中的定义。谢谢，斯利姆。改变了箭头的功能，它变成了被动的。

<p> {{uploadPercentage}} </p>