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

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>

Lars Schellhas Lars Schellhas · Accepted Answer · 2021-03-11T12:04:43

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)

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

2 Answers