Vue.js

Question

我是 Vue.js 的新手，我将它与 Vue-Draggable 一起使用，以便重新安排独立小部件（组件）在 [=26= 中的位置].

我还希望能够通过包含订单的 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在变化，Vue自动重新创建组件

解决方案是使用组件的名称作为键。 :key="widget.name"

Vue.js - 子组件在更新它们的位置时重新渲染

Vue.js - Child components are re-rendered while updating their position

javascript

vue.draggable