VueJS 2组件列表不能在Vue.set上重新渲染（）

Question

我使用3个动作创建照片列表（一个表格元素）：上，下，删除。我有阵列重新排序工作，但现在我的表不会重新渲染。我已经使用这个例子：https://vuejs.org/v2/guide/list.html#Caveats

我可以在Vue Devtools中看到数组确实已经改变。

<template> 
 
    <div class="table-responsive"> 
 
    <table class="table table-striped table--middle"> 
 
     <thead> 
 
     <tr> 
 
      <th>Preview</th> 
 
      <th>Bestandsnaam</th> 
 
      <th>Acties</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr v-for="(photo, index) in photos" :key="index"> 
 
      <td> 
 
       <img v-bind:src="'/storage/' + photo.path" height="100"> 
 
      </td> 
 
      <td> 
 
       <span class="truncate">{{ photo.filename }}</span> 
 
      </td> 
 
      <td> 
 
       <button class="btn btn-info" @click="up(index)"><i class="fa fa-chevron-up"></i></button> 
 
       <button class="btn btn-info" @click="down(index)"><i class="fa fa-chevron-down"></i></button> 
 
       <button class="btn btn-danger" @click="deletePhoto(photo)"><i class="fa fa-trash-o"></i></button> 
 
      </td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</template> 
 

 
<script> 
 
    export default { 
 
     props: ['photos'], 
 

 
     methods: { 
 

 
      up(index) { 
 

 
      if(index !== 0) { 
 
       let oldPhoto = this.photos[index - 1]; 
 
       let currentPhoto = this.photos[index]; 
 

 
       this.$set(this.photos, index - 1, currentPhoto); 
 
       this.$set(this.photos, index, oldPhoto); 
 
      } 
 

 
      }, 
 

 
      down(id) { 
 

 
      }, 
 

 
      deletePhoto(id) { 
 

 
      } 
 

 
     }, 
 

 
     mounted() { 
 
      console.log('Component ready.') 
 
     } 
 
    } 
 
</script>

Answer 1

我想你是做了错误的方式。这些代码：

this.$set(this.photos, index - 1, currentPhoto); 
this.$set(this.photos, index, oldPhoto); 

他们实际上是试图建立this.photos这是一个可以被视为只读prop。相反，在您定义数据的地方创建这些方法，然后将这些方法作为道具传给他们，然后传递这些方法up，down等。