PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, October 13, 2022

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

 October 13, 2022     axios, javascript, vue.js, vuejs3     No comments   

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)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing