FileReader 方法不更新数据属性 (vue.js)

Question

我试图通过 FileReader 在 vue.js 中加载 JSON 文件。 JSON 文件作为 javascript 文件对象实例通过 form file input of BoostrapVue 加载。这是我当前的 App.vue 文件：

<template>
    <div v-if="fileUploaded">
        <div class="rf">
            <ChildComponent v-bind:json="json"/>
        </div>
    </div>
    <div v-else>
        <!-- BoostrapVueFileInput -->
    </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
name: 'rf',
data () {
    return {
    fileUploaded: false,
    file: null,
    json: null
    }
},
methods: {
    read() {
    var reader = new FileReader();
    reader.onload = function(event) {
        this.json = JSON.parse(event.target.result);
    };
    reader.readAsText(this.file);
    }
}
}
</script>

一旦我更新了 JSON 文件，json 应该会随之更新并传递给 ChildComponent 以显示其中的一部分。不幸的是，结果 json 属性是空的，就像它没有被 read() 方法更新一样。我不明白我哪里错了。

Answer 1

你是对的，它没有被更新。 anonymous function 中 this 的上下文发生变化。

reader.onload = function(event) {
  this.json = JSON.parse(event.target.result);
}.bind(this);

在你的情况下，你可以简单地使用 bind 方法。

如果你仍然向下编译，你可以使用fat arrow方法：

reader.onload = (event) => {
  this.json = JSON.parse(event.target.result);
}

FileReader 方法不更新数据属性 (vue.js)

FileReader method does not update data property (vue.js)

filereader

fileapi

vue.js

FileReader 方法不更新数据 属性 (vue.js)

FileReader method does not update data property (vue.js)

filereader

fileapi

vue.js

FileReader 方法不更新数据属性 (vue.js)