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

VueJS-在回调中为this.property分配值

2 个答案: