用数据表，数组和vuex处理vuedraggable的正确方法是什么？

问题描述

因此，我对此感到困惑。我有一个vuetify v-data-table，其中的可扩展行包含一些标签，这些标签希望在行之间可拖动。

数据存储在vuex中。主要的“列表”是对象数组-“输出文件”。对象元素之一本身就是一个数组-“通道”。我希望能够将一个“通道”从一个输出文件拖到另一个输出文件，并将状态存储在vuex中。

要查看如何执行此操作的大量参考资料，但是本质上，我需要在每行的基础上定义一个“可拖动的”，并将我的“列表元素（通道）”放入每个可拖动的实例中。

我觉得我需要使用带有参数的getter或带有参数的计算：值，但是每次尝试不同的方法时，我似乎都会对此感到吃惊。

商店摘要：

state:
  outputFiles:[]

(output file is:)

{
  id:uuid(),channels:[]
}

(channel is:)

{
  id:uuid(),name:"channel name",etc.etc.etc.

Outputs.vue提取：

            <v-data-table show-select single-select show-expand :headers="headers" :items="outputFiles" class="elevation-1" >
              <template v-slot:expanded-item="{ headers,item }">
                <td :colspan="headers.length">
                <v-container flex>
                <draggable
                  class="channel"
                  :list="getoutputFileChannels(item.id)"
                  data-description="item"
                  selectable
                  select-class="selected"
                  :group="{name:'channel'}" tag="ul"
                >
                  <li
                  v-for="channel in getoutputFileChannels(item.id)" 
                  @click:close="doDeleteChannelFromOutputFile({oFileId:item.id,oChanId:channel.id})"
                  :key=channel.id
                  >{{ channel.text }}</li>
                </draggable>
                </v-container>
              </td>
              </template>
              <template v-slot:item.actions="{ item }">
                <v-icon
                  small
                  class="mr-2"
                  @click="editItem(item)"
                >
                  mdi-pencil
                </v-icon>
                <v-icon
                  small
                  @click="deleteItem(item)"
                >
                  mdi-delete
                </v-icon>
              </template>
            </v-data-table>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）