我试图通过R I C K A R D在vue.js中加载JSON文件。 JSON文件通过form file input of BoostrapVue作为javascript File对象实例加载。这是我当前的FileReader文件：
App.vue一旦我更新了JSON文件，<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，后者将显示其中的一部分。不幸的是，生成的ChildComponent属性为空，就像没有通过json方法进行更新一样。我不明白我哪里错了。
答案 0 :(得分：2)
您是对的，它没有被更新。 this中anonymous function的上下文发生了变化。
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);
}