vuetify.js 如何将 type="submit" 添加到 Loaders Button答案

【问题标题】：vuetify.js how to add type="submit" to Loaders Buttonvuetify.js 如何将 type="submit" 添加到 Loaders Button
【发布时间】：2021-02-03 06:08:56
【问题描述】：

我是 Vuetify.js 的新手，我正在尝试使用 Loaders Button 提交表单我尝试过，但没有成功。

我的 tryid 代码

       <v-btn
        rounded
        class="ma-2"
        type="submit"
        :loading="loading2"
        :disabled="loading2"
        color="primary"
        @click="loader = 'loading2'"
      >
        Login
        <template v-slot:loader>
          <span>Loading...</span>
        </template>
      </v-btn>

我的主要代码

<template>
  <v-row justify="center">
    <v-col cols="12" sm="6">
      <form @submit.prevent="submit">
        <v-card ref="form">
          <v-card-text>
            <h3 class="text-center">Login</h3>
            <v-divider class="mt-3"></v-divider>

            <v-col cols="12">
              <v-img
                :src="require('@/assets/1.png')"
                class="my-3"
                contain
                height="80"
              />
            </v-col>

            <v-col cols="12" sm="12">
              <v-text-field
                v-model.trim="form.mobile_number"
                type="number"
                label="Mobile No"
                solo
                autocomplete="off"
              ></v-text-field>
              <small class="form-text red--text" v-if="errors.mobile_number">{{
                errors.mobile_number[0]
              }}</small>
            </v-col>

            <v-col cols="12">
              <v-text-field
                v-model.trim="form.password"
                type="password"
                label="Password"
                solo
                autocomplete="off"
                append-icon="mdi-eye"
              ></v-text-field>
              <small class="form-text red--text" v-if="errors.password">{{
                errors.password[0]
              }}</small>
            </v-col>
          </v-card-text>

          <v-divider class="mt-12"></v-divider>

          <v-card-actions>
            <div class="text-center">
              <v-btn
                rounded
                color="primary"
                dark
                to="/AppMain/UserRegisterPage"
                nuxt
                >Register</v-btn
              >
            </div>

            <v-spacer></v-spacer>

            <div class="text-center">
              <v-btn
                rounded
                class="ma-2"
                type="submit"
                :loading="loading2"
                :disabled="loading2"
                color="primary"
                @click="loader = 'loading2'"
              >
                Login
                <template v-slot:loader>
                  <span>Loading...</span>
                </template>
              </v-btn>

              <!-- <v-btn rounded type="submit" color="primary" dark>Login</v-btn> -->
            </div>
          </v-card-actions>
        </v-card>
      </form>
    </v-col>
  </v-row>
 </template>
 <script>
 export default {
  middleware: ["guest"],
  data() {
    return {
      loader: null,
      loading: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading5: false,
      form: {
        mobile_number: "",
        password: "",
      },
    };
  },
  watch: {
    loader() {
      const l = this.loader;
      this[l] = !this[l];

      setTimeout(() => (this[l] = false), 3000);

      this.loader = null;
    },
  },
  methods: {
    async submit() {
      await this.$auth.loginWith("local", {
        data: this.form,
      });

      this.$router.push("/");
    },
  },
};
</script>
<style>
.custom-loader {
  animation: loader 1s infinite;
  display: flex;
}
@-moz-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes loader {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

【问题讨论】：

标签： laravel vue.js vue-component nuxt.js vuetify.js

【解决方案1】：

您创建并使用变量“加载”但从未设置它。

为了解决您的问题，请在您的 @click 方法中添加类似

loading = true
....

然后将 loading 设为 false，以停止按钮的加载样式。

祝你好运！

【讨论】：