как использовать clickkevent для кнопки входа на vuejs

Question

Я использую vuejs с vuex. Я провожу проверку с использованием vulidate, я не использую какую-либо простую базу данных, я хочу предоставить фиксированное имя пользователя и пароль на своей странице входа в систему. vue и когда я запускаю эту страницу в браузере я предоставляю имя пользователя и пароль, которые я объявил на своей странице входа в систему. vue, затем, когда вход в систему успешен, он открывает мою панель инструментов. Но он не может дать мне такой результат, как это сделать. Логин. vue

<template>
<div id="login">
  <CContainer class="d-flex content-center min-vh-100">
    <CRow>
      <CCol>
        <CCardGroup>
          <CCard class="p-4">
            <CCardBody>
              <CForm>
                <h1>Login</h1>
                <p class="text-muted">Sign In to your account</p>
                <div class="form-group" :class="{ 'form-group--error': $v.username.$error }">
                <CInput 
                  type="text"
                  placeholder="Username"
                  required
                  :value ="username"
                  @Change="username($event.target.value)"
                  autocomplete="username email"
                >
                  <template #prepend-content><CIcon name="cil-user"/></template>
                </CInput>
                 <div class="error"
                  v-if="!$v.username.required">username Require</div>
                  <div class="error" v-if="$v.username.minLength">Name must have at least {{$v.username.$params.minLength.min}} letters</div>
                  </div>
                <CInput 
                  placeholder="Password"
                  input:rules="passwordRules"
                  type="password"
                  required
                  :value="password"
                  @Change="password($event.target.value)"
                  id="password"
                  autocomplete="current-password"

                >
                  <template #prepend-content><CIcon name="cil-lock-locked"/></template>
                </CInput>
                <CRow>
                  <CCol col="6" class="text-left">
                    <CButton color="primary" class="px-4" @click="direDisplay">Login</CButton>
                  </CCol>
                  <CCol col="6" class="text-right">
                    <CButton color="link" class="px-0">Forgot password?</CButton>
                    <CButton color="link" class="d-md-none">Register now!</CButton>
                  </CCol>
                </CRow>
              </CForm>
            </CCardBody>
          </CCard>
          <CCard
            color="primary"
            text-color="white"
            class="text-center py-5 d-sm-down-none"
            body-wrapper
          >
            <h2>Sign up</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <CButton
              color="primary"
              class="active mt-3"
            >
              Register Now!
            </CButton>
          </CCard>
        </CCardGroup>
      </CCol>
    </CRow>
  </CContainer>
</div>
</template>

<script>
import Dashboard from '../Dashboard.vue';
import { required,minLength} from 'vuelidate/lib/validators'
//import { mapState, mapActions } from 'vuex'
//var csrf_token = $('meUserrefreshta[name="csrf-token"]').attr('content');
export default {
  name: 'Login',

  data(){
return{
       //errors:[],
       username:'',
       password:''
}
  },
 validations:{
          username:{
            required,
            minLength:minLength(7)
          },
          password:{
            required
          }
        },
        methods :{
         username(value){
           this.username=value
           this.$v.username.$touch()
         },
         password(value){
           this.password=value
           this.$v.password.$touch()
         }
        },
methods:{
          direDisplay(){
             console.log(this.$v.username.$touch());

            if(this.$v.$invalid){
              this.submmitStatus='ERROR';
            }else{
             this.$router.push('/Dashboard')
              setTimeout(() => {
                this.submitStatus='OK'
              }, 800);
            }
  }
        }
   }
</script>