问题描述
我在项目中使用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",…}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)