可拖动的 vue 组件 [英] Draggable vue components

问题描述

复制时:

https://sortablejs.github.io/Vue.Draggable/#/嵌套示例

(代码)

我遇到了与模型相关的问题；如何向 vue 组件添加可拖动而不是原始 json(如示例中所用).

I ran into an issue related to the model; how can I add draggable to vue components instead of a raw json (as used in the example).

我想要做的是，添加拖放至:

What I want to do is, add drag and drop to:

https://codesandbox.io/s/gg1en

(每个项目都可以从一组移动(拖动")到另一组，每个组都可以从较低的位置拖动到较高的位置(反之亦然).

(each item can be moved ("dragged") from one group to another, each group can be dragged from a lower position to an upper one (and vice-versa).

我试过了:

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

并得到:

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

但在这种情况下，数据来自(通过?)道具.

but in this case the data comes from (through?) a prop.

组件的层次结构是:

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

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

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

I need components instead of plain JSON as each component has additional features (e.g. CRUD).

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

How should I go about combining components with draggable?

推荐答案

如果您有一个正在发生变化的组件 prop，有多种选择:

If you have a component prop that's being mutated, there are multiple options:

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

1. Convert your prop to a custom v-model. It will allow two-ways bindings without problems. (Use the prop name value and sent $emit('input', this.value) to update it.
2. Use prop.sync modifier, which is kinda the same as using v-model but the prop has a specific name. Use :data.sync="myItems" on the parent, and run $emit('update:data', this.data) inside the component to update it.
3. Copy the prop to a data variable inside the component. So that the prop is only used as a default value for this data, but then it's only the data that's being mutated. But this won't allow the parent to see any modifications on that prop since it's not being updated directly.

<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 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！