使用vue.draggable和v-data-table时索引号重复

如何解决使用vue.draggable和v-data-table时索引号重复

我在项目中使用vue-draggable将行移动到单个列中。为了跟踪分配给行的新索引号，我将新索引号存储到数据库中，因此当从api返回数组时，我按索引号返回它。我所遇到的问题是，当我向下或向上移动一行项目时，用新项目替换的项目仍然保留其相同的索引值，因此这意味着我现在使用重复的索引值，例如>

第1行
第2行
第3行

如果我将第2行移动到第1行的位置，那么第2行现在具有索引1，但是原始行1仍然保留其索引1值，这导致我的数组包含存储在数据库中的重复索引值。 / p>

问题是将vue-draggable与v-data-table一起使用时是否正确使用？如果可以的话，如何获取被替换项目的索引值，以便可以相应地更改其索引值，以确保其索引值与新位置一致。

这里的任何指导将不胜感激，因为我为此苦苦挣扎了两天。

                                   <v-data-table
                                    :headers="OppStageHeaders"
                                    :items="opportunitystages"
                                    item-key="id"
                                    no-data-text="No Opportunity stages entries available"
                                    :show-select="false"
                                    :disable-pagination="true"
                                    :hide-default-footer="true"
                                    >
                                    <template v-slot:body="props">
                                      <draggable
                                        :list="props.items"
                                        tag="tbody"
                                        @change="setStageIndex"
                                      >
                                        <tr
                                          v-for="(stage,index) in props.items"
                                          :key="index"
                                        >
                                          <td>
                                            <v-icon
                                              small
                                              class="page__grab-icon"
                                            >
                                              mdi-arrow-all
                                            </v-icon>
                                          </td>
                                          <td> {{ index }} </td>
                                          <td> {{ stage.stage_name }} </td>
                                          <td> {{ stage.description }} </td>
                                          <td>
                                            <v-btn icon :disabled="stage.stage_name == 'Qualified' || stage.stage_name == 'Contact Made' || stage.stage_name == 'Lead' || stage.stage_name == 'Prospect' || stage.stage_name == 'Opportunity' || stage.stage_name == 'Deal Completed'">
                                              <v-icon
                                                small
                                                class="mr-2"
                                                v-on:click="getOppStageById(stage.id)"
                                              >
                                                edit
                                              </v-icon>
                                            </v-btn>
                                            <v-btn icon :disabled="stage.stage_name == 'Qualified' || stage.stage_name == 'Contact Made' || stage.stage_name == 'Lead' || stage.stage_name == 'Prospect' || stage.stage_name == 'Opportunity' || stage.stage_name == 'Deal Completed'">
                                              <v-icon
                                                small
                                                v-on:click="deleteOppStageById(stage.id)"
                                              >
                                                delete
                                              </v-icon>
                                            </v-btn>
                                          </td>
                                        </tr>
                                      </draggable>
                                    </template>
                                  </v-data-table>




<script>
import session from '@/services/Api'
import HeaderLayout from '@/views/HeaderLayout'
import draggable from 'vuedraggable'

export default {
  name: 'systemComponent',components: {
    HeaderLayout,draggable,},method: {
    // method to handle the index of the stages when dragged between index numbers
    setStageIndex: function (event) {
      console.log(event)
      const draggedStageNewIndex = event.moved.newIndex;
      console.log('Dragged Stage New Index:',draggedStageNewIndex );
      const draggedStageOldIndex = event.moved.oldIndex;
      console.log('Dragged Stage Old Index:',draggedStageOldIndex );
      const draggedStageId = event.moved.element.id;
      session.put(`api/v1/system/opportunitystages/${draggedStageId}/`,{
          'stage_index': draggedStageNewIndex,'stage_name': this.stage_name,'description': this.description,}).then((response) => {
        console.log(response)
        this.getOppStages();
        }).catch((error) => {
        console.log(error)
      })
    },}

焦点为stage_index的API响应示例

0: {id: 2,stage_index: 1,stage_name: "Contact Made",description: "Contact made with client."}
1: {id: 1,stage_name: "Qualified",description: "Qualified"}
2: {id: 3,stage_index: 3,stage_name: "Lead",description: "Client provides contact details."}
3: {id: 4,stage_index: 4,stage_name: "Prospect",…}
4: {id: 5,stage_name: "Opportunity",…}
5: {id: 6,stage_index: 5,stage_name: "Custom",description: "Custom"}
6: {id: 7,stage_name: "Deal Completed",…}