[Vuejs]-Vuetify: v-dialog won't close although v-model variable is set to false

by

4👍

✅

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)
👤Lars Schellhas

0👍

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.

👤Dhruv Shah

Leave a comment