vuejs v-for带有文件对象不会工作
问题描述:
我尝试使用v-for
制作一个列表,但它似乎不能在文件对象列表上使用v-bind:class
,但它适用于普通对象。vuejs v-for带有文件对象不会工作
我迄今为止代码:
new Vue({
\t el: '#app',
data: {
files: [],
objects: [
\t { status: 'added' }
]
},
mounted() {
\t var f = new File([""], "filename");
this.files.push(this.extend(f, { status: 'added' }));
// This one is working
console.log(this.objects);
// This one is not working
console.log(this.files);
},
methods: {
startUpload: function (file) {
this.$set(file, 'status', 'uploading');
},
uploadObject: function (object) {
\t this.$set(object, 'status', 'uploading');
},
extend: function(obj, src) {
\t Object.keys(src).forEach(function(key) { obj[key] = src[key]; });
\t \t return obj;
}
}
});
li {
padding: 10px;
margin-top: 5px;
}
li > span.uploading {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<div id="app">
<ul>
<li v-for="file in files">
<span v-bind:class="{ uploading: file.status == 'uploading' }">File status: {{ file.status }}</span> <a href="#" v-on:click="startUpload(file)">upload</a>
</li>
</ul>
----
<ul>
<li v-for="object in objects">
<span v-bind:class="{ uploading: object.status == 'uploading' }">Object status: {{ object.status }}</span> <a href="#" v-on:click="uploadObject(object)">upload</a>
</li>
</ul>
</div>
答
Vue的犯规更新视图更改属性文件后。所以你可以强迫它。像这样
this.$set(file, 'status', 'uploading');
this.$forceUpdate();
答
如果我正确地理解问题的实质,你要分配基于身份所需的类(“上传”)?
<span v-bind:class="object.status == 'uploading' ? 'uploading' : ''">Object status: {{ object.status }}</span> <a href="#" v-on:click="uploadObject(object)">upload</a>
+0
是的,object.status工作得很好,但是file.status没有。 –
+0
请输出console.log(this.files); –
工程就像一个魅力,谢谢! :) –