嘿，我是vue-js和vuetify的新手。在我的editProductSave中，我想传递另一个变量，它是表中行的索引。这是我当前的代码，我将如何实现？使用vuetify v-data-table 绘制表格
全代码
<template>
<v-card>
<v-data-table
:headers="tableFields"
:items="programs"
:items-per-page="5">
<template v-slot:[`item._id.$oid`]="{ item }">
{{item._id.$oid}}
</template>
<template v-slot:[`item.tags`]="props">
<v-edit-dialog
:return-value.sync="props.item.tags"
large
persistent
@save="editProductSave(props.item)">
<div>{{props.item.tags.length === 0 ? '' : props.item.tags}}</div>
<template v-slot:input>
<div class="mt-1 text-h2">
Update Tag
</div>
<v-text-field
v-model="props.item.tags"
label="Edit"
single-line
counter
autofocus
></v-text-field>
</template>
</v-edit-dialog>
</template>
<script>
import tdmApi from "../services/api/Database";
export default {
props: ["DatabaseList"],
computed: {
totalRows() {
return this.programs.length;
},
},
created () {
this.viewTdmDatabase();
},
data () {
return {
tableFields: [
{text:'ID',value:'_id.$oid'},
{text:'Tag',value:'tags'},
],
programs: [],
}
},
</script>
<template v-slot:item.tags="{item,index}">
{{index}} //Output index
</template>
上面的代码应该可以工作，确保用对象覆盖它。
尝试以下代码：
<template v-slot:[`item.tags`]="{props, index}">
<v-edit-dialog
:return-value.sync="props.item.tags"
large persistent
@save="editProductSave(props.item, index)">
// ...
</v-edit-dialog>
</template>
在脚本中，方法是
methods: {
editProductSave(item, index) {
// ...
}
}
似乎vuetify在v-data-table-api中没有索引字段，因此为了获得它，您可以更改v-data-table的结构。
这是一个如何获取每行索引的示例。
https://www.codegrepper.com/code-examples/whatever/vuetify+v-data-table+get+行+索引
您可以简单地将索引添加到计算属性中的程序中，并将其导入数据表中，如下所示：
模板
...
<v-data-table
:headers="tableFields"
:items="programsComputed"
...
脚本
export default {
...
computed: {
totalRows() {
return this.programs.length;
},
programsComputed () {
return this.programs.map((program, index) => {
program.index = index;
return program;
})
}
},
...
data () {
return {
tableFields: [
{text:'ID',value:'_id.$oid'},
{text:'Tag',value:'tags'},
],
programs: [],
}
},
在您的editProductSave(item)中，您只需拨打item.index