vuedraggable左右两列互相拖拽如果用的clone的话,那么如果拖拽到右侧,然后修改拖拽到右侧的数据的话那么就会影响到左侧的数据?

作者站长头像
站长
· 阅读数 14

vuedraggable左右两列互相拖拽如果用的clone的话,那么如果拖拽到右侧,然后修改拖拽到右侧的数据的话那么就会影响到左侧的数据,我拷贝了也不行,不知道为什么

回复
1个回答
avatar
test
2024-07-15

你看看这个下面的实现:

<draggable
  v-model="leftList"
  @change="onChange"
  :options="{
    group: { name: 'shared', pull: 'clone', put: false },
    sort: false,
  }"
>
  <!-- Left list items  -->
</draggable>

<draggable
  v-model="rightList"
  @change="onChange"
  :options="{
    group: { name: 'shared', pull: false, put: true },
  }"
>
  <!-- Right list items  -->
</draggable>



export default {
  data() {
    return {
      leftList: [
        
      ],
      rightList: [
        
      ],
    };
  },
  methods: {
    onChange(event) {
      if (event.added && event.added.element) {
        const newItem = JSON.parse(JSON.stringify(event.added.element));
        this.$set(this.rightList, event.added.newIndex, newItem);
      }
    },
  },
};
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容