我正在使用 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 中我只得到一个空对象。
看不到任何明显的东西...
最佳答案
我不确定您的 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
关于javascript - Vue js不使用文件数据更新 View ,但能够控制台日志,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45845035/