可拖动的 vue 组件

Posted 2023-05-08

【中文标题】可拖动的 vue 组件

【英文标题】：Draggable vue components

【发布时间】：2021-08-30 04:24:04

【问题描述】：

复制时：

https://sortablejs.github.io/Vue.Draggable/#/nested-example

(code)

我遇到了与模型相关的问题；如何将可拖动的组件添加到 vue 组件而不是原始 json（如示例中使用的）。

我想做的是，添加拖放到：

https://codesandbox.io/s/gg1en

（每个项目都可以从一个组移动（“拖动”）到另一个组，每个组都可以从较低位置拖动到较高位置（反之亦然）。

我试过了：

https://codesandbox.io/s/quirky-sutherland-5s2zz?file=/src/components/InventorySectionC.vue

得到：

Unexpected mutation of "itemSectionData" prop. (vue/no-mutating-props)

但在这种情况下，数据来自（通过？）一个道具。

组件的层次结构是：

ChromePage --> InventorySectionC --> InventorySectionGroupC --> InventorySectionGroupItemC

我需要组件而不是纯 JSON，因为每个组件都有附加功能（例如 CRUD）。

我应该如何将组件与可拖动组件结合起来？

【参考方案1】：

如果您有一个正在被变异的组件道具，则有多种选择：

将您的道具转换为自定义 v 模型。它将允许双向绑定没有问题。 （使用道具名称value 并发送$emit('input', this.value) 进行更新。 使用prop.sync 修饰符，这与使用v-model 有点相同，但道具有一个特定的名称。在父组件上使用:data.sync="myItems"，并在组件内部运行$emit('update:data', this.data) 来更新它。 将 prop 复制到组件内的数据变量中。因此，该道具仅用作此数据的默认值，但只有正在变异的数据。但这不会让父母看到对该道具的任何修改，因为它没有直接更新。

<template>
  <draggable v-model="_data"></draggable>
</template>

<script>
props: 
  data:  type: Object, required: true 

data() 
  return 
    _data: 
  

mounted() 
  // Copy
  Object.assign(this._data, this.data)

</script>