vuejs v-for带有文件对象不会工作

Question

我尝试使用v-for制作一个列表，但它似乎不能在文件对象列表上使用v-bind:class，但它适用于普通对象。

我迄今为止代码：

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>

Answer 1

Vue的犯规更新视图更改属性文件后。所以你可以强迫它。像这样

this.$set(file, 'status', 'uploading');  
this.$forceUpdate(); 

Answer 2

如果我正确地理解问题的实质，你要分配基于身份所需的类（“上传”）？

<span v-bind:class="object.status == 'uploading' ? 'uploading' : ''">Object status: {{ object.status }}</span> <a href="#" v-on:click="uploadObject(object)">upload</a>