Vuetify: v-dialog won't close although v-model variable is set to false - vue.js

Question

I have a couple of dialogs which are created with v-for (exchangeTypeAbbreviation and exchangeType come from there). When I click on the activator button, the dialog opens and the value in the object I use for storing the dialogs' state is updated to "true".
But when I click the cancel or save button, the dialog won't close, although the object's value is updated to "false".
<v-list-item>
<v-dialog
max-width="400"
v-model="dialogs[exchangeTypeAbbreviation]"
>
<template v-slot:activator="{ on }">
<v-list-item v-on="on">
<v-icon class="pr-4">
mdi-plus
</v-icon>
Add Product Flow
</v-list-item>
</template>
<v-card>
<v-card-title>Add Product Flow</v-card-title>
<v-card-subtitle
v-text="exchangeType"
></v-card-subtitle>
<v-card-actions>
<v-btn
#click="
dialogs[exchangeTypeAbbreviation] = false;
createUnitProcessExchange(
exchangeTypeAbbreviation
);
"
>Save</v-btn
>
<v-btn
#click="dialogs[exchangeTypeAbbreviation] = false"
>Cancel</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</v-list-item>
<script>
export default {
name: 'Activities',
data: () => ({
dialogs: {},
exchangeTypes: {},
unitProcessExchangesOptions: null,
}
}),
mounted() {
Promise.all([
this.loadUnitProcessExchangeOptions()
])
},
methods: {
async loadUnitProcessExchangeOptions() {
return this.$api
.options('/unitprocessexchanges/', {
headers: {
Authorization: 'Token ' + localStorage.getItem('token')
}
})
.then(response => {
this.unitProcessExchangesOptions = response.data.actions.POST
for (const exchangeType of this.unitProcessExchangesOptions
.exchange_type.choices) {
this.exchangeTypes[exchangeType.value] = exchangeType.display_name
this.dialogs[exchangeType.value] = false
}
})
},
async createUnitProcessExchange(exchangeTypeAbbreviation) {
this.newUnitProcessExchange.activity = this.activities[
this.selectedActivity
].url
this.newUnitProcessExchange.exchange_type = exchangeTypeAbbreviation
this.dialogs[exchangeTypeAbbreviation] = false
// eslint-disable-next-line no-debugger
debugger
}
}
}
</script>

Answer 1

I was able to figure out why it doesn't work. Due to limitations in JavaScript, Vue.js has some difficulties to observe changes in Objects and Arrays. This is documented here.
In my case, I added nested variables inside my "dialogs" variable by assigning them directly, e.g. like this
this.dialogs[index] = false
However, this creates a sub-element which can't be tracked by Vue.js. To make sure that changes on this element can be tracked, it either has to be pre-defined from the beginning or needs to be set by using the Vue.$set command. Always using the following command, solved the issue for me:
this.$set(dialogs, index, false)

Answer 2

I think the first problem is you are trying to change the object with an array notation i.e array[0] but it should be a dot notation with object property, in your case it would be dialogs.exchangeTypeAbbreviation = false.
With that one more problem would be that property doesn't exist so in
data: () => ({
dialogs: {exchangeTypeAbbreviation:Boolean},
exchangeTypes: {},
unitProcessExchangesOptions: null,
}
}),
with this now you can set the value of exchangeTypeAbbreviation.