Метод FileReader не обновляет свойство данных (vue.js) - PullRequest
Новая
       33

Метод FileReader не обновляет свойство данных (vue.js)

0 голосов
/ 09 января 2019

Я пытаюсь загрузить файл JSON в vue.js через FileReader. Файл JSON загружается через файл ввода формы BoostrapVue как экземпляр объекта javascript File. Вот мой текущий 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(). Я не понимаю, где я не прав.

1 Ответ

0 голосов
/ 09 января 2019

Вы правы, оно не обновляется. Контекст 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);
}
...