javascript - 带有文件对象的 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

如果我正确地理解了问题的实质，您是否要根据状态分配所需的类(“上传”)？

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