[FIXED] how to get inputs from vue js file to js script

Issue

I was wondering how to pass variables from an input into an api file I have made. Its' hard to explain for me but I'll show with code.

First step get the input data from the user.

<input type="text" class="form-control mt-2" v-model="first_name" required placeholder="First name">

Second step I pass the data into the script and ask it to send the data to the API js file I have made.

    data() {
        return{
        first_name: '',
        last_name: '',
        email_address: '',
        password_auth: ''
        }
    },
    methods: {
        async handleSubmit() {
            console.log('Form submitted')
            try{
            const response = await authAPI.registerUser(this.first_name, this.last_name, this.email_address, this.password_auth)
            }
            catch (err)
            {
              console.log(err)
            }

I thought by putting the varibles I had in the other file as params would work, but I just get undefined.

    registerUser(first_name, last_name, email_address, password) 
    {
        return API().post('/api/register')
    }

I'm not sure if this is the best way to do it, what would your suggestions be?

It works fine when I just post the request from the vue.js file but I want to be organised and keep all the api calls on a seperate js file and just call the functions when I need them. Thank you very much for your help. If I didn't explain well I'll try again in comments.

Solution

Declare the function like this

//apiCallUtility.js

export const registerUser=(first_name, last_name, email_address, password)=>{
        return API().post('/api/register')
    }

In the vue component import it

import {registerUser} from "relative path for apiCallUtility.js"

//and then use it as a function

Answered By - Kaneki21

Answer Checked By - Timothy Miller (PHPFixing Admin)