可拖动的 vue 组件

Question

复制时：

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）。

我应该如何将组件与 draggable 结合起来？

Answer 1

如果你有一个正在改变的组件道具，有多种选择：

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

<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>

可拖动的 vue 组件

Draggable vue components

javascript

draggable

vue.js

vue-component

vuejs2