Close dialog that depends on data from store in Vuetify

Question

I have a dialog(modal) that opens when I get error message from an API. but I can't seem to be able to close it. I'm using Vuetify.

template:

<v-dialog v-model="isLoginFailed" hide-overlay persistent width="300">
      <v-card color="primary" dark>
        <v-card-text>{{ isLoginFailed }}</v-card-text>
      </v-card>
    </v-dialog>

script:

  computed: {
    isLoginFailed() {
      return this.$store.state.errorMessage;
    },}

  methods: {
    clearDialog() {
      this.$store.commit("clearDialog");
    }
  },

store:

mutations: {
    clearDialog(state) {
      state.errorMessage = "";
    },
    signInPending(state) {
      state.isPending = true;
    },
    signInFailed(state, e) {
      state.isPending = false;
      state.errorMessage = e.errorMessage;
    },
    signInSuccess(state, user) {
      state.isPending = false;
    }
  },

I'm not sure how to activate the clearDialog, I don't want to have a button to close it, I want the user to be able to click outside the dialog to close it.

How can I do it?

P.S is their a cleaner/smarter way of handling API calls and modal opening?

Was able to make it work by removing persistent and

signInPending(state) {
          state.isPending = true;
          state.errorMessage = "";
        }

Boussadjra Brahim Boussadjra Brahim · Accepted Answer · 2020-09-17T13:42:27

Remove the persistent prop and add a setter to the computed property :

<v-dialog v-model="isLoginFailed" hide-overlay  width="300">
      <v-card color="primary" dark>
        <v-card-text>{{ isLoginFailed }}</v-card-text>
      </v-card>
    </v-dialog>

computed: {
    isLoginFailed : {
        get(){
         return this.$store.state.errorMessage;
         },
        set(val){

        }
    },}

Close dialog that depends on data from store in Vuetify

1 Answers