When I toggle the password visibility and then click the submit button, it functions correctly

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>

Answer №1

Ensure your page doesn't reload by updating your code like this.

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

Alternatively

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a Bash script for installing software and managing Git pull requests

Creating a Unix Bash Script I've taken on the responsibility of creating a bash script for transferring data between two Debian 10 servers - one in a non-production environment and the other in production. The task at hand involves: SECTION A #!/bi ...

Enum-Based Object Indexing

The structure I am currently working with is as follows; import data from "../data.min.json"; export enum TileType { tree = 'tree', rock = 'rock' } interface MapTile { walkable: boolean; positions: number[][]; } exp ...

Issue encountered when attempting to insert data via node into MySQL database

As a new Node developer, I am in the process of building some initial applications. Currently, I am working on inserting records into a MySQL database using Node. Below is an example of my post method: router.post('/add',function(req,res){ c ...

What steps can I take to resolve the TypeError in next js where I am unable to set properties of undefined for 'className'?

I've been working on a Next.js project and I've copied some code from CodePen that is used for designing product layouts on an e-commerce website. However, I'm encountering a problem with the following error message: TypeError: Cannot set pr ...

Retrieve the HTML value of an element in Vue.js by clicking on its adjacent element

Hey there, I'm currently working on a simple notes app and I've hit a roadblock with one particular feature. In my project, I have a card element with a delete button as a child. What I need to achieve is to check if the value of the .card-title ...

What is the best way to extract the elements within a form using Angular and automatically add them to a list?

Recently, I started learning Angular and decided to create a simple list feature. The idea is to input an item name and price, then click "Add item" to see it added to the list below. I have all the code set up correctly, but for some reason the name and ...

Implementing dynamic controls in an ASP.NET MVC5 application using AngularJS

I am currently working on a project that will utilize MVC5, angularJS, and bootstrap for development. One of the key features in my project is a dropdown menu called "expense type". Upon selecting a value from this dropdown, additional controls need to be ...

Tips for dynamically updating the API path in VUEX state

Currently, I am working on dynamically updating the API path within my Vuex state. When the page loads, I have set a default path of "example.com/api/datasetA.json" in Vuex. However, I would like this path to be updated to "example.com/api/datasetB.json" b ...

Copy data from JSON file to Vue2 Google Maps markers

I recently started working on a basic Vue project. The project involves integrating a Google Map using the vue2-google-maps package. Additionally, I have a JSON file (or data.php) containing the following information: { "locations": [ { "nam ...

Personalize the error message for throwing an exception in JavaScript

I've been working on customizing error messages for exceptions thrown in JavaScript. Despite my best efforts, I have not been successful so far. I'm currently attempting the following code snippet but it's not functioning as expected: f ...

Retrieve every item in a JSON file based on a specific key and combine them into a fresh array

I have a JSON file containing contact information which I am retrieving using a service and the following function. My goal is to create a new array called 'contactList' that combines first names and last names from the contacts, adding an &apos ...

Default close x button not functioning to close modal dialog

When I click the [X] button in my modal dialog box, it doesn't close. Here is an example of my code: $('#apply_Compensation_Leave').show(); This is the modal code: <div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="di ...

Transmitting information in segments using Node.js

Recently delving into the realm of nodejs, I find myself tackling a backend project for an Angular 4 application. The main challenge lies in the backend's sluggishness in generating the complete data for responses. My goal is to send out data graduall ...

Unable to insert <form> element into the content of the popover

I am attempting to display a popover with content fetched from an API using AJAX. The content includes various HTML tags like <form> with a <textarea> and a <button>, <br/> tags, <a> links, and <time> elements. The issu ...

What is the best method to retrieve the country name from a world map using D3.js?

I'm trying to figure out how to retrieve the country name from a click event on the D3 world map. Despite inspecting the DOM, I can't quite understand how the country's name, code, or population is associated with the map. The template for ...

Does the webworker function as a multi-thread?

For example: worker.postMessage(data1); worker.postMessage(data2); If there are multiple issues to be dealt with inside the web worker, would worker.postMessage(data2) block before completing data1? ...

How to properly implement envMap in Three.js?

Could someone assist me in finding a material similar to the one shown here? I attempted to implement it using the following code: * { margin: 0; padding: 0; } .object { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: no ...

Is it possible to retrieve the controller path for an AJAX request from within a partial view?

Looking for a solution to fully decouple and reuse a partial view that allows users to select dates and filter results based on those dates. This widget can be used on multiple pages, so I wanted to add event listeners that would submit the form within the ...

CSS margin-left causing issues in Chrome Extension

My current situation is incredibly puzzling, as I am at a loss for what is happening. I developed a Firefox add-on using jQuery and CSS to revamp a website. When attempting to transfer the add-on to Chrome (which was relatively straightforward due to the s ...

Challenges encountered with input outcomes

I am facing an issue with input results. I have a button that triggers a function to check for empty input fields. However, when I click the button, it always falls into the last if statement and displays as if the fields are not empty. I have already att ...