Vue Когда я нажимаю для отображения пароля, кнопка отправки работает

Question

Я пишу заявку с Vue и Laravel. Я создал Vue компонент с именем UsersCreate. Этот компонент получает данные от пользователей и с помощью ax ios отправляет их на контроллер Laravel. У меня вопрос, когда я нажимаю, чтобы showPassword [Button / Anchor] onSubmit работает метод, как я могу остановить его?

Laravel 6.x Vue 2.5.x

UsersCreate. vue

<template>
    <div>
        <h1>Create User</h1>
        <div v-if="message" class="py-2 px-4 text-sm text-green-700 bg-green-300">{{ message }}</div>
        <form @submit.prevent="onSubmit($event)">
            <div>
                <label for="user_name">Name</label>
                <input type="text" id="user_name" v-model="user.name"/>
            </div>
            <div>
                <label for="user_email">Email</label>
                <input type="email" id="user_email" v-model="user.email">
            </div>
            <div>
                <label for="user_password">Password</label>
                <input v-bind:type="password_type" id="user_password" v-model="user.password">
                <a type="button" @click="showPassword">{{ password_button_text }}</a>
            </div>
            <div>
                <button type="submit" :disabled="saving">
                    {{ saving ? 'Creating...' : 'Create' }}
                </button>
            </div>
        </form>
    </div>
</template>

<script>
    import users from "../../api/users";

    export default {
        name: "UsersCreate",
        data() {
            return {
                password_type: 'password',
                password_button_text: 'Show Password',
                saving: false,
                message: false,
                user: {
                    name: '',
                    email: '',
                    password: '',
                }
            }
        },
        methods: {
            showPassword() {
                if (this.password_type === 'password') {
                    this.password_type = 'text';
                    this.password_button_text = 'Hide Password';
                } else {
                    this.password_type = `password`;
                    this.password_button_text = `Show Password`;
                }
            },
            onSubmit(event) {
                this.saving = true;
                this.message = false;
                users.create(this.user)
                    .then((data) => {
                        console.log(data);
                    })
                    .catch((e) => {
                        this.message = e.response.data.message || 'Hard code: Error';
                    })
                    .then(() => this.saving = false)
            }
        }
    }
</script>

<style scoped>

</style>

Answer 1

предотвратить перезагрузку страницы, изменив свой код на это.

<a type="button" @click.prevent="showPassword">{{ password_button_text }}</a>

или

<a type="button" @click.stop="showPassword">{{ password_button_text }}</a>