I am currently working on an application that combines Vue with Laravel. One of the Vue components I created is called UsersCreate. This component is responsible for gathering user data and sending it to a Laravel controller using axios. However, I have encountered an issue where the onSubmit method is triggered when I click the showPassword button. How can I prevent this from happening?
Using Laravel 6.x and 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>