0

使用 Vuetify 和 VueDraggable，我试图使 VListGroup 下的项目可拖动。

关于代码，我想做的是从这里到那里（在此代码笔中不能拖动组中的 atm 列表项）。

没有 VListGroups：

模板

<draggable v-model="controls"
           :group="draggable.group"
           :sort="false"
           tag="v-list"
           :component-data="draggable.componentData">
    <v-list-item v-for="(control, index) in controls"
                 :key="index"
                 link>
      <v-list-item-title v-text="control.name"></v-list-item-title>
      <v-list-item-icon>
        <v-icon v-text="control.icon"></v-icon>
      </v-list-item-icon>
    </v-list-item>
</draggable>

数据

data: () => ({
  draggable: {
    group: {
      name: 'formbuilder',
      pull: 'clone',
      put: 'false',
    },
    componentData: {
      props: {
        dense: true,
      },
    },
  },
  controls: [
    { name: 'Row', icon: 'mdi-table-row' },
    { name: 'Column', icon: 'mdi-table-column' },
    { name: 'Text', icon: 'mdi-text-short' },
    { name: 'Text area', icon: 'mdi-text-subject' },
    { name: 'Select', icon: 'mdi-filter-variant' },
    { name: 'Checkbox & switch', icon: 'mdi-checkbox-marked' },
    { name: 'Radio group', icon: 'mdi-radiobox-marked' },
  ],
}),

使用 VListGroup

模板

<v-list dense
        expand>
  <v-list-group v-for="(group, index) in controlsGroups"
                :prepend-icon="group.icon"
                no-action>
    <template v-slot:activator>
      <v-list-item-title v-text="group.name"></v-list-item-title>
    </template>
    <v-list-item v-for="(control, index) in group.controls"
                 :key="index"
                 link>
      <v-list-item-title v-text="control.name"></v-list-item-title>
      <v-list-item-icon>
        <v-icon v-text="control.icon"></v-icon>
      </v-list-item-icon>
  </v-list-group>
</v-list>

数据

data: () => ({
  controlsGroups: [
    {
      name: 'Layouts',
      icon: 'mdi-view-dashboard',
      controls: [
        { name: 'Row', icon: 'mdi-table-row' },
        { name: 'Column', icon: 'mdi-table-column' }
      ],
    },
    {
      name: 'inputs',
      icon: 'mdi-textbox',
      controls: [
        { name: 'Text', icon: 'mdi-text-short' },
        { name: 'Text area', icon: 'mdi-text-subject' },
        { name: 'Select', icon: 'mdi-filter-variant' },
        { name: 'Checkbox & switch', icon: 'mdi-checkbox-marked' },
        { name: 'Radio group', icon: 'mdi-radiobox-marked' },
      ],
    },
  ],
}),

我的问题是，我似乎无法将 VListGroup 的激活器插槽与 VueDraggable 的组件数据道具一起使用......

关于如何实现这一目标的任何想法？

谢谢你。

4

0 回答 0