javascript - Vue.js - 子组件在更新其位置时重新渲染

问题描述

我是新手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 更新时，我遇到了这个问题。

标签： javascriptvue.jsvue.draggable

javascript - Vue.js - 子组件在更新其位置时重新渲染

问题描述

解决方案

推荐阅读