What causes VueJS to automatically reload after a push array operation?

Question

What causes VueJS to automatically reload after a push array operation?

Whenever I add a value to my array using VueJS, Chrome initially displays it but then immediately reloads the webpage.

let vm = new Vue ({
    el:'#app2',

    data: {
        people: ['Robert', 'Pablo', 'Lucas', 'Teban']
    },

    methods: {
        addPerson: function() {
            this.people.push('Maxime')   
        },
    }
})

<section id="app2" style="margin-top: 100px">
    <p>{{people}}</p>
    <form>
        <button v-on:click='addPerson'>Ajouter une personne</button>
    </form>
</section>

javascript vue.js vuejs2

Answer 1

Answer №1

Your issue arises from the fact that your <button> element is causing the form submission. When its type is not specified, it defaults to submit, triggering the form submission and refreshing the page:

submit: The button submits the form data to the server. This behavior occurs when the attribute is not defined or is set to an empty or invalid value.

To avoid this, you can do the following:

<button v-on:click='addPerson' type='button'>Add a person</button>

Alternatively, you can utilize the prevent event modifier with the click directive:

<button v-on:click.prevent='addPerson'>Add a person</button>

Another approach is to directly call event.preventDefault() within the method:

methods: {
    addPerson: function(e) {
        e.preventDefault();
        this.people.push('Maxime')   
    },
}

Answer 2

Your issue arises from the fact that your <button> element is causing the form submission. When its type is not specified, it defaults to submit, triggering the form submission and refreshing the page:

submit: The button submits the form data to the server. This behavior occurs when the attribute is not defined or is set to an empty or invalid value.

To avoid this, you can do the following:

<button v-on:click='addPerson' type='button'>Add a person</button>

Alternatively, you can utilize the prevent event modifier with the click directive:

<button v-on:click.prevent='addPerson'>Add a person</button>

Another approach is to directly call event.preventDefault() within the method:

methods: {
    addPerson: function(e) {
        e.preventDefault();
        this.people.push('Maxime')   
    },
}

What causes VueJS to automatically reload after a push array operation?

Answer №1

Similar questions

Refreshing a value in the view at regular intervals using a filter in Vue

Verify that the text entered in the form is accurate, and if it meets the required criteria, proceed to the next

When invoking a function, a React Component utilizes the props from the first element instead of its own

Ensure that the input field only accepts numerical values

What is the best way to save and retrieve a JSON object as a cookie using vanilla JavaScript?

Pause the execution of an AJAX callback function after numerous AJAX requests

AngularJS causing issues with Materializecss dropdown menu operation

Transforming date format from fullCalendar dayClick event to HH:MM

Scroll horizontally on a webpage using drag with JavaScript

Delete the current code within the specified div element

Creating operations in Angular using the Model View Controller (MVC)

Creating MySQL query results in Node.js manufacturing process

How can a static website incorporate a local image without the need for backend functionality?

The code splitting feature in Nuxt is currently experiencing issues

The cachedResponse does not contain any header information

A mesh from Maya that has been exported with its skin duplicated within a Three.js environment

Ways to locate the final child in a sequence

Transform array elements into objects with associated indices and data types

Using VueJS and MomentJS to calculate the passage of time

Objects being collected as arrays of arrays in garbage collection