v-model没有定义，将数据从v-data-table传递到自定义组件

Question

在v-data表的扩展槽中有一个自定义组件fileUpload。在从这个组件上传文件之后，我想更新数据表中的项目。我试图使用v-model:item做到这一点，但是当调用uploadFiles函数时，我得到错误:modelItem未定义。我做错了什么?

包含数据表的组件:

<v-data-table
:headers="headers"
:items="financialDocuments"
:single-expand="singleExpand"
:expanded.sync="expanded"
item-key="finDocId"
show-expand
disable-pagination
:hide-default-footer="true"
no-data-text='Geen data'
>

<template v-slot:[`item.actions`]="{ item }">
<v-icon large @click="deleteTutorial(item.id)">
mdi-file-find-outline
</v-icon>
<v-icon large class="mr-2" @click="editTutorial(item.id)">
mdi-file-send-outline
</v-icon>
</template>
<template v-slot:expanded-item="{ item }">
<td :colspan="attachmentHeaders.length">
<v-data-table
:headers="attachmentHeaders"
:items="item.attachmentPlainDtos"
item-key="finDocId"
disable-pagination
:hide-default-footer="true"
no-data-text='Geen bijlagen'
>
<template #item.attachment="{ item }">
<a target="_blank" :href="item.attachmentUri">
{{ item.attachmentName }}
</a>
</template>
<template v-slot:[`item.attachmentActions`]="{ item }">
<v-icon large @click="deleteTutorial(item.id)">
mdi-delete
</v-icon>
</template>
</v-data-table>
<FileUpload v-model:modelItem="item"></FileUpload>
</td>            
</template>
</v-data-table>
....
export default {
name: "financialDocumentList",
data() {
return {
financialDocuments: [],
singleExpand: true,
headers: [
{ text: "DocId", align: "start", sortable: false, value: "finDocId" },
{ text: "Omschrijving", value: "description", sortable: false },
{ text: "Relatienummer", value: "debtor.debtorCode", sortable: false },
{ text: "Afleverwijze", value: "debtor.debtorDocumentDeliveryPreference", sortable: false },
{ text: "Documenttype", value: "debtor.debtorDocumentTypePreference", sortable: false },
{ text: "Acties", value: "actions", sortable: false },
],
attachmentHeaders: [
{ text: "Bijlage", align: "start", value: "attachment", sortable: false},
{ text: "Acties", value: "attachmentActions", sortable: false },
],
};
},
methods: {
.....

fileUpload组件:

export default {

props: ['modelItem'],
name: "file-upload",
data() {
return {
};
},
methods: {
async uploadFiles() {
for (let i = 0; i < this.selectedFiles.length; i++) {
await this.upload(i, this.selectedFiles[i]);
}
},
upload(idx, file) {
return new Promise((resolve, reject) => {
var finDocId = this.modelItem.finDocId;
FinancialDocumentDataService.upload(finDocId, file, (event) => {
}).then((response) => {
this.modelItem = response.data;
return resolve(response);
}).catch((e) => {
return reject(e);
});
});
}
}
};

Answer 1

v-modelon组件暴露为modelValue(而不是modelItem)。源

...
props: ['modelValue'],
...

或像这样命名

// parent
...
<FileUpload v-model:modelItem="item"></FileUpload>
...

// child
...
props: ['modelItem'],
...