Блог

У меня есть диалоговое окно (модальное), которое открывается, когда я получаю сообщение об ошибке от API. но, похоже, я не могу его закрыть. Я использую Vuetify.

шаблон:

 <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>
  

скрипт:

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

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

Магазин:

 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;
    }
  },
  

Я не уверен, как активировать clearDialog , я не хочу иметь кнопку для его закрытия, я хочу, чтобы пользователь мог щелкнуть вне диалогового окна, чтобы закрыть его.

Как я могу это сделать?

P.S является ли их более чистым / разумным способом обработки вызовов API и модального открытия?

Удалось заставить его работать, удалив persistent и

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

Удалите persistent реквизит и добавьте параметр к вычисляемому свойству :

 <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){

        }
    },}