我尝试使用v-for
创建一个列表,但似乎我无法在文件对象列表中使用v-bind:class
,但它适用于普通对象。
到目前为止我的代码:
new Vue({
el: '#app',
data: {
files: [],
objects: [
{ status: 'added' }
]
},
mounted() {
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) {
this.$set(object, 'status', 'uploading');
},
extend: function(obj, src) {
Object.keys(src).forEach(function(key) { obj[key] = src[key]; });
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>
答案 0 :(得分:2)
如果我正确理解了问题的本质,你想根据状态分配所需的类('upload')吗?
<span v-bind:class="object.status == 'uploading' ? 'uploading' : ''">Object status: {{ object.status }}</span> <a href="#" v-on:click="uploadObject(object)">upload</a>
答案 1 :(得分:0)
更改文件的属性后,Vue不会更新视图。所以你可以强迫它。喜欢这个
this.$set(file, 'status', 'uploading');
this.$forceUpdate();