可拖动的 vue 组件答案

【问题标题】：Draggable vue components可拖动的 vue 组件
【发布时间】：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）。

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

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component draggable

【解决方案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>

【讨论】：