Vue. js - дочерние компоненты перерисовываются при обновлении их положения

Question

Я новичок в Vue.js, и я использую его вместе с Vue-Draggable, чтобы изменить положение отдельных виджетов (компонентов) внутри DOM.

Я также хотите иметь возможность динамически переставлять эту позицию с помощью ответа Ajax, содержащего порядок.

Проблема, с которой я столкнулся с моей текущей реализацией, заключается в том, что когда я переупорядочиваю, компоненты повторно визуализируются . Я не хочу этого.

Любые идеи были бы полезны.

<template>
  <draggable tag="div"
             class="container-fluid"
             @start="drag=true"
             @end="drag=false"
             handle=".v-drag-handle"
             v-bind="dragOptions"
             v-model="widgetList"
  >
    <transition-group type="transition">
      <component v-for="(widget, key) in widgetList"
                 :key="key"
                 :is="widget.widget">
      </component>
    </transition-group>
  </draggable>
</template>


 const widgets = [
    Component1,
    Component2,
    Component3,
    Component4,
    Component5
  ];

  export default {
    name: 'Stack overflow',

    data() {
      return {
        widgetList: [],
        drag: false,
        config: this.getHttpConfig(),
      };
    },

    computed: {
      dragOptions() {
        return {
          animation: 800,
          disabled: false,
          ghostClass: "v-ghost"
        };
      }
    },
    created() {
      this.getWidgetOrder();
    },
    watch: {
      widgetList(val, oldVal) {
        if (oldVal) {
          this.setWidgetOrder(this.widgetList);
        }
      }
    },
    methods: {
      sort() {
        this.widgetList = widgets.map((widget, index) => {
          return { widget: widgets[index], order: index + 1 };
        });
      },
      getWidgetOrder() {
        this.prepareFormData('get');

        this.$http(this.config)
          .then(response => {
            //todo handle response
            this.sort();
          })
          .catch(response => {
            throw new Error('Could not get widget order.');
          });
      }
    },
    components: {
      Component1,
      Component2,
      Component3,
      Component4,
      Component5
    }
}

Для экономии времени я удалил все не связанные методы и оставил только те, которые используются, пока проблема возникает. Я считаю, что проблема возникает на v-model, когда widgetList обновляется, я получаю эту проблему.

Answer 1

Проблема здесь возникает из-за того, что key в l oop изменяется, а Vue автоматически заново создает компонент.

Решением было использовать имя компонента в качестве ключа. :key="widget.name"