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); 

彼らは実際には読み取り専用として考えることができるpropあるthis.photosを設定しようとしています。代わりにこれらのメソッドを作成し、データを定義してからup、downなどのメソッドをpropsとして渡して呼び出してください。