vue.js - laravel vue 和 vuetify 如何调用 this.loading = false;

Question

我试图this.loading = false; 在下面的代码中添加。

.catch(         
    Toast.fire({
        icon: 'warning',
        title: 'Invalid Email or Password'
    }) 
)

页面代码

<template>

  <v-row justify="center">
    <v-col cols="12" sm="6">
      <form @submit.prevent="login">
        <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="/assets/1.png"
                class="my-3"
                contain
                height="50"
              />
            </v-col>

            <v-col cols="12" sm="12">
              <v-text-field
                v-model.trim="form.mobile_number"
                type="number"
                label="Mobile No"
                solo
                hide-details="auto"
              ></v-text-field>
              <span class="form-text red--text" v-if="errors.mobile_number">
                {{ errors.mobile_number[0] }}
              </span>
              <!-- <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
                hide-details="auto"
                append-icon="mdi-eye"
              ></v-text-field>
              <span class="form-text red--text" v-if="errors.password">
                {{ errors.password[0] }}
              </span>
              <!-- <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>
            <v-spacer></v-spacer>

            <div class="text-center">
              <v-btn
                rounded
                type="submit"
                :loading="loading"
                color="primary"
                dark
                >Login</v-btn
              >
            </div>
          </v-card-actions>
        </v-card>
      </form>
    </v-col>
  </v-row>

</template>
 

   

<script>
 export default {
    created(){
      if (User.loggedIn()) {
        this.$router.push({name: 'DashBoard'})
      }
    },
 
    data(){
    return {
        loading: false,
      form:{
        mobile_number: null,
        password: null
      },
      errors:[],
    };
  }, 
  methods:{
    login(){
       this.loading = true;
      axios.post('/api/auth/login',this.form)
      .then(res => {
        User.responseAfterLogin(res)
        Toast.fire({
          icon: 'success',
          title: 'Signed in successfully'
        })
        this.$router.push({ name: 'DashBoard'});
      })

   
 .catch((error) => {this.loading = false;
          {
            this.errors = error.response.data.errors;
          }
            })

       .catch(
         
            Toast.fire({
              icon: 'warning',
              title: 'Invalid Email or Password'
            }) 
                   
        )

        .finally(() => {
  this.loading = false
}) 
    }
  }


  }; 
</script>

标签： vue.jsnuxt.jsvuetify.js

Answer 1

 data(){
      return {
        loading: false,
        form:{
          mobile_number: null,
          password: null
        },
        errors: {
          mobile_number: null,
          password: null,
        },
      };
    },

axios.post('/api/auth/login',this.form)
          .then(res => {
            User.responseAfterLogin(res)
            Toast.fire({
              icon: 'success',
              title: 'Signed in successfully'
            })
            this.$router.push({ name: 'DashBoard'});
          })
          .catch((error) => {
            this.loading = false;
            this.errors = error.response.data.errors;
              Toast.fire({
                icon: 'warning',
                title: 'Invalid Email or Password'
              })
          })
          .finally(() => {
            this.loading = false
          })