laravel - vuetify.js 如何将 type="submit" 添加到 Loaders Button

问题描述

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

标签： laravelvue.jsvue-componentnuxt.jsvuetify.js

laravel - vuetify.js 如何将 type="submit" 添加到 Loaders Button

问题描述

解决方案

推荐阅读