cssd-back/resources/js/vue/components/modal/auth/VerifyCode.vue

<template>
  <v-form >
    <v-container grid-list-xs>
      <v-layout row wrap class="justify-center">
        <v-flex xs12 md3 sm3 class="WM-WidthScreen-SM WM-WidthScreen-XS">
          <material-card
          color="black"
          title="Verify Code">
            <v-layout row wrap class="px-3">
              <v-flex xs12 md12 sm12>
                <v-text-field
                  v-model="verifyCode"
                  label="Verify Code Number"
                  color="black"
                ></v-text-field>
              </v-flex>
            </v-layout>
            <v-layout row wrap class="px-3">
              <v-flex xs12 md6 sm6 class="text-md-left text-sm-center text-xs-center">
                <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitVerifyCode">
                  <v-icon class="white--text mr-2 caption">fas fa-sign-in-alt</v-icon>
                  <span class="white--text">Submit</span>
                </v-btn>
              </v-flex>
            </v-layout>
          </material-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-form>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      verifyCode: "",
    };
  },
  methods: {
      ...mapActions('auth', [
          'verifyCodeSMS'
      ]),
      submitVerifyCode() {
          if (this.verifyCode != '') {
            this.verifyCodeSMS({verifyCode: this.verifyCode});
          }
      }
  }
};
</script>