redirecting user to different page after pressing submit using vue.js

Question

I am trying to redirect a user to a different page after they input there correct user information and then pressing the submit button using (window.location.href) to redirect but the page keeps reloading after the form has been submitted

<form id="login" method="post">
        <h1>Login students</h1>
        <label for ="username">username:</label>
        <input required type="username" id="username" v-model="username">
        <br><br>
        <label for="password">password: </label>
        <input required type="password" id="password" v-model='password'>
        <br><br>
        <button v-on:click='onSubmit'>submit</button>
    </form>


var loginApp = new Vue({
    el: '#login',
    data: {
        username: '',
        password: '',
    },

    methods: {
        onSubmit: function () {
            // check if the email already exists
            var users = '';

            var newUser = this.username;
            var passcheck = this.password;

            if (localStorage.getItem('users')) { // 'users' is an array of objects
                users = JSON.parse(localStorage.getItem('users'));
            }

            if (users) {
                if (users.some(function (user) {
                    return user.username === newUser & user.password === passcheck

                })) {


                    //alert('Welcome back-' + newUser);
                    //window.location.href = '<index.html>' + '' + newUser;
                    window.location.href = "index.html";




                } else {
                    alert('Incorrect username or password');


                }
            }
        }
    }

});

Answer 1

the proble is with <form id="login" method="post">

the form doesn't have an action defined, so it makes the browsers refresh.

you need to prevent the default action either through the form element

<form v-on:submit.prevent>

or through your onsubmit handler:

methods: {
  onSubmit: function (e) {
    e.preventDefault()
    //...
  }
}