Question

我有一个对话框（模式），当我从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 = "";
        }

Answer 1

删除persistent属性，然后将setter添加到计算的属性中：

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

        }
    },}

关闭对话框，该对话框取决于Vuetify中存储的数据

1 个答案: