Блог

У меня есть кнопка входа в систему, которая будет переходить к маршруту dashboard/ при успешном входе в систему. Кнопка работает при нажатии, но когда я нажимаю клавишу ввода, она дублирует маршрут.

Итак, поток такой:

• Перейдите на страницу входа
• Нажмите клавишу «Ввод»
• Перейдите к «Панели мониторинга»
• Нажмите кнопку возврата браузера
• Нажмите клавишу «Ввод»

В этот момент адрес становится http://localhost:3000/dashboard/dashboard/ вместо просто http://localhost:3000/dashboard/ . Что еще более странно, так это то, что если я следую тому же потоку, что и выше, но вместо этого нажимаю кнопку. Он работает так, как ожидалось, независимо от того, сколько раз я нажимаю кнопку «Назад». Разделенный компонент показан ниже.

 <template >
  <v-container>
    <v-row justify="center">
      <v-col cols='6' align="center">
        <v-form>
          <h1 class="pb-4">Login</h1>

          <v-text-field
            label="Email"
            placeholder="someone@example.com"    
          >
          </v-text-field>
          <v-text-field
            label="Password"
            type="password"
          >
          </v-text-field>

          <v-btn dark block @click="login"> Login </v-btn>
          <br />
          <a href="">Forgot your password?</a>
        </v-form>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      showPassword: false,
    };
  },
  mounted(){
    document.addEventListener("keyup", (event) => {
      if (event.key ==='Enter') {
        this.login();
      }
    });
  },
  methods: {
    async login() {
      try {
        //throw 'Login is not setup'
        //do login logic 
        this.$router.push({ path: "dashboard/" });
        
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

<style>
</style>
  

Я думаю, ваша проблема заключается в том, как у вас настроено событие с помощью прослушивателя событий, который вам технически не нужен, поскольку родным и нормальным поведением для формы является отправка при вводе. Вместо того, чтобы иметь событие щелчка на вашей кнопке, используйте тип кнопки отправки и поведение по умолчанию для предотвращения в форме, чтобы перехватить обычную отправку формы и вместо этого запустить функцию отправки. Затем это должно работать так же, как при нажатии кнопки или нажатии enter.

Шаблон:

 <form @submit.prevent="login()">
  <button type="submit">submit</button>
</form>
  

 export default {
  methods: {
    login() {
      // stuff you want to do
    },
  }

  

У Vuetify должны быть способы настройки его свойств, чтобы они выполняли то же самое, что и ванильные формы. Но идея должна работать так же.