vuedraggable可以实现元素的拖拽功能,可以直接改变data中的数据,但无法直接改变vuex中的数据,需要先get再去set。对于动态组件的生成,如果单纯的只是用第一种计算方法,再使用v-model时就无法拖拽,因为v-model绑定是data中的数据,而现在我们需要把值存在vuex中。
<draggable
@update="endEvent"
v-bind="dragOptions"
v-model="pageInfo"
>
<transition-group>
<component
:config="item"
:is="item.name"
:key="item.id"
v-for="item in pageInfo"
></component>
</transition-group>
</draggable>
import vuedraggable from "vuedraggable";
export default {
data() {
return {
dragOptions: {
animation: 500,
filter: ".disabled",
},
};
},
components: {
//调用组件
vuedraggable,
},
computed: {
//不应该直接这么写
pageInfo() {
return this.$store.state.pageInfo;
},
//而应该这样
pageInfo: {
get() {
return this.$store.state.pageInfo
},
set(value) {
this.$store.commit('updateInfo', value)
}
},
},
methods: {
endEvent(e) {
//拖拽完之后的回调函数
console.log(this.pageInfo);
},
},
}