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