javascript - Vue js不使用文件数据更新 View ，但能够控制台日志

Question

我正在使用 vue.js 进行图像上传，但无法解决这个奇怪的问题。

在我看来:

{{ form.image }}

我的vue文件中的数据:

data: function() {
    return {
        form: new SparkForm({
            id: null,
            name: null,
            image: null
        }),
        imagePreview: null
    }
},

以及文件输入更改时调用的方法:

imageChanged: function(e) {
    var $this = this;
    let files = e.target.files || e.dataTransfer.file;

    if (!files.length) {
        return;
    } else {
        $this.form.image = files[0];
        console.log($this.form.image);
    }
},

这将在控制台正确记录文件信息，但在 View 中我只得到一个空对象。

看不到任何明显的东西...

Answer 1

我不确定您的 Vue 实例是否会认为 form.image 是响应式的，因为它是 SparkForm 实例的属性。

您可能想在 image 属性上的 imageChanged 中测试强制 react 性，如下所示:

$this.$set($this.form, 'image', files[0];

https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats