关闭依赖于 Vuetify 中存储的数据的对话框

Posted 2023-02-23

【中文标题】关闭依赖于 Vuetify 中存储的数据的对话框

【英文标题】：Close dialog that depends on data from store in Vuetify

【发布时间】：2021-01-04 10:10:57

【问题描述】：

我有一个对话框（模态），当我从 API 收到错误消息时会打开。 但我似乎无法关闭它。 我正在使用 Vuetify。

模板：

<v-dialog v-model="isLoginFailed" hide-overlay persistent >
      <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 = "";
        

【参考方案1】：

移除persistent 属性并为计算属性添加一个setter：

<v-dialog v-model="isLoginFailed" hide-overlay  >
      <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)

        
    ,

【讨论】：

它有效，但只是第一次。如果我尝试进行另一个 API 调用（登录），对话框将不会打开。

你是怎么做那个 api 调用的？