VueJS - 在回调中为 this.property 赋值

Question

如何强制

this.json = reader.result;

在给定的范围内正确地为 this.json 赋值？

因为值存在，但没有赋值。

<div id="app" >
    <label class="text-reader"><input type="file" v-on:change="getFile($event)"></label>
    {{ json }} // it's being set to "test" from getFile function.
</div>

这是 VueJS 代码

---

new Vue
({
    el: '#app',
    data: {
        json: {}
    },
    methods:
    {
        getFile: function(ev) 
        {
            this.json = "test";

            var file = ev.target.files[0];
            var reader = new FileReader();
            reader.onload = function(e) 
            {
                this.json = reader.result;
                console.log(this.json);  // displays content properly
            }

            reader.readAsText(file);     
        }
    }
});

---

到目前为止我一直在尝试的只是添加某种处理程序

getFile: function(ev) 
{
    var file = ev.target.files[0];
    var reader = new FileReader();
    reader.onload = function(e) 
    {
        this.callBackHandler(reader.result);
    }

    reader.readAsText(file);
},
callBackHandler: function(val)
{
    console.log(val);
    this.json = val;
}

它大叫：

TypeError: this.callBackHandler 不是函数

---

同样使用 callBackHandler 作为参数。

<label class="text-reader"><input type="file" v-on:change="getFile($event, callBackHandler())"></label>

getFile: function(ev, handler) 
{
    var file = ev.target.files[0];
    var reader = new FileReader();
    reader.onload = function(handler) 
    {
        handler(reader.result);
    }

    reader.readAsText(file);
},
callBackHandler: function(val)
{
    console.log(val);
    this.json = val;
}

Answer 1

getFile 函数应如下所示：

getFile: function(ev, handler) {
        var file = ev.target.files[0];
        var reader = new FileReader();
        reader.onload = (e => {
            this.callBackHandler(reader.result);
        }) 
}

或

getFile: function(ev, handler) {
        var file = ev.target.files[0];
        var reader = new FileReader();
        var self = this;
        reader.onload = function(e){
            self.callBackHandler(reader.result);
        } 
}

或

getFile: function(ev, handler) {
        var file = ev.target.files[0];
        var reader = new FileReader();
        reader.onload = function(e){
            this.callBackHandler(reader.result);
        }.bind(this) 
}

Answer 2

解决方案：

v-on:change="getFile($event)"

(...)

reader.onload = (x => 
{
    this.callBackHandler(reader.result);
});