vuejs v-for文件对象不起作用

Question

我尝试使用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>

Answer 1

如果我正确理解了问题的本质，你想根据状态分配所需的类（'upload'）吗？

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

Answer 2

更改文件的属性后，Vue不会更新视图。所以你可以强迫它。喜欢这个

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