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等传递给道具并调用它们。