I am currently creating a sign-in page where the customer can sign in using their username and password.

I have two files, sign-in.html and sign-in.js. I believe that the html file is working well and there is no problems with it.

    <main>
        <navmenu></navmenu>
        <h2>Sign In</h2>
        <form @submit.prevent="signIn()">
            <label>Username:</label>
            <input type="text" id="username" v-model="customer.username" required><br /><br />
            <label>Password:</label>
            <input type="password" id="password" v-model="customer.password" required><br /><br />
            <button type="submit">Sign In</button>
        </form>
        <p>If you don't have an account, <a href="create-account.html">sign up here</a>.</p>
    </main>
    <script type="module" src="js/view-products.js"></script>
</body>
</html>

The problem lies in the js file.

import { navigationMenu } from './navigation-menu.js';
import { sessionStore } from './session-store.js';
const app = Vue.createApp({
    data() {
        return {
            customer: {
                username: '',
                password: ''
            }
        };
    },
    methods: {
        signIn() {
            alert('Sign In method called!');
            axios.post('/api/customers/' + this.customer.username, {
                password: this.customer.password
            })
            .then(response => {
                alert('Sign in successful!');
                window.location = 'view-products.html';
            })

        }
    },

I know the html works well as when I remove the customer.username and customer.password to just username and password it appears, but when i have the customer. in front of it, it no longer shows and I get a blank page. I also get an error which says customer is not defined.

This makes me think that the problem is the data customer in the js file but everything else I have tried has not worked.

Is my code correct or could the problem be from another file in my program.

When I added some debugging to my code to see the problem it just wouldn’t run that file, it wouldn’t give me an error either it was just simply providing a blank page without even using the navigation bar which would have no effect on the customer. things.

The full error message from the console of the page was:
“Uncaught TypeError: customer is undefined”