Vue当我点击显示密码时，提交按钮有效

Question

我正在用 Vue 和 Laravel 编写一个应用程序。我创建了一个名为 UsersCreate 的 Vue 组件。该组件从用户那里获取数据，并使用 axios 将其发送到 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>