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

我怎么能强迫

this.json=reader.result;

因为值在那里,但它没有被分配。

<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;
}

它大叫:

同时使用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;
}