Fill vuetify combobox with data from function - vue.js

Question

I have a Vuetiy combobox that's part of a form in which the user can search voor data by email and it returns a object (a visitor):
<EmailInput
v-model="selectedVisitor"
:required="true"
:autocomplete="true"
:items="visitors"
/>
<template>
<div>
<v-text-field
v-if="!autocomplete"
:rules="[
(v) => !!v || $t('error.emailRequired'),
(v) => /.+#.+\..+/.test(v) || $t('error.emailInvalid'),
]"
outlined
:label="label"
required
#input="$emit('input', $event)"
/>
<v-combobox
v-if="autocomplete"
:rules="[
(v) => !!v || $t('error.emailRequired'),
]"
:label="label"
outlined
append-icon="arrow_drop_down"
:items="items"
item-text="email"
item-value="email"
#input="$emit('input', $event)"
>
<template v-slot:selection="data">
{{ data.item.email || data.item }}
</template>
<template v-slot:item="data">
{{ data.item.name }} - {{ data.item.email }}
</template>
</v-combobox>
</div>
</template>
<script>
export default {
props: {
required: Boolean,
items: Array,
autocomplete: Boolean,
},
computed: {
label() {
if (this.required === true) {
return this.$i18n.t('labels.emailReq');
}
return this.$i18n.t('labels.email');
},
},
};
</script>
If an existing visitor is found, the other form fields are filled, otherwise just the email is sent to the newVisitor object.
selectedVisitor(val) {
if (typeof val === 'object' && val !== null) {
this.newAppointment.visitorId = val.id;
this.existingVisitor = true; // we don't have to write it to the db
Object.assign(this.newVisitor, val); // for displaying the data only, object assign because db array was edited too when data was modified or deleted
} else if (val === null || val === '') {
this.newAppointment.visitorId = '';
this.newVisitor = {};
} else {
this.newVisitor.email = val;
}
},
The user then clicks a button and the data gets sent to the multipleVisitors array.
The problem is with the function that repopulates these form fields if the user wants to edit the data:
editVisitor(email) {
// get the visitor that needs to be edited
const visitorArray = this.multipleVisitors.filter((el) => el.email === email);
const visitor = visitorArray[0];
// set the visitor to the form
this.newVisitor = visitor;
// variable set to combobox
this.selectedVisitor = visitor.email;
// remove the visitor from the visitor array
this.multipleVisitors = this.multipleVisitors.filter((el) => el.email !== email);
},
The form is filled in except for the combobox which stays empty. If I look at vue dev tools the variable assigned to the v-model does contain the email address.
I've tried assigning the whole object to selectedVisitor but that does not change anything.

Answer 1

this could maybe help
<v-combobox :items="MyFillFuntion()"></v-combobox>
<v-combobox :items="MyFillFuntion(scopeData)" # optional></v-combobox>
and don't forget
<script>
export default {
data: () => ({
MyFillFuntion() {
let array_i_need_to_fill = [];
// your process ... ...
// and finally
return array_i_need_to_fill;
}
}),
props: {
required: Boolean,
items: Array,
autocomplete: Boolean,
},
computed: {
label() {
if (this.required === true) {
return this.$i18n.t('labels.emailReq');
}
return this.$i18n.t('labels.email');
},
},
};
</script>