I would like to implement the login function with Vue.js and Firebase.

I would like to implement login functionality with Vue.js and Firebase.

On the new registration screen, I would like to combine email and password in v-model, import the instance of axios that I created, define the register method to access the endpoint in axios, and fire the register method when I press the button.

If successful, the console should return data to the Object, but it does not work.Thank you for your cooperation.

Error Messages

Error in v-on handler: "TypeError:_axios_for_auth_js_WEBPACK_IMPORTED_MODULE_0__.default.port is not a function"

Tried

I installed axios because there was no axios in the devDependencies of package.json.

Supplementary information (for example, FW/Tool Version)

"@vue/cli-plugin-babel": "^4.5.13",
"@vue/cli-plugin-eslint": "^4.5.13",
"@vue/cli-service": "^4.5.13",
"axios": "^0.21.1",
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.12"

Source Codes Affected

<template>
  <div class="container">
  <h2>New membership</h2>
  <form class="login-form">
    <div class="input-group">
      <label for="email">mail address</label>
      <input type="email" id="email" v-model="email">
    </div>
    <div class="input-group">
      <label for="password">Password</label><
      <input type="password" id="password" v-model="password">
    </div>
    <div class="input-group">
      <button type="button"@click="register()">Register</button>
    </div>
  </form>
</div>
</template>

<script>
import axios from '../axios-for-auth.js';
export default {
  data(){
    US>return{
      e-mail:
      password: "
    }
  },
  methods: {
    register() {
      axios.port(
            '/accounts:signInWithPassword?key=****************',
            {
              email:this.email,
              password —This.password,
              returnSecureToken —true
            }
      .then(response)=>{
        console.log(response);
      });
      This.email="";
      This.password="";
    }
  }
}

</script>

axios-for-auth.js

import axios from 'axios';
const instance = axios.create({
  baseURL: 'https://identitytoolkit.googleapis.com/v1'
});

export default instance;

package.json

"devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.13",
    "@vue/cli-plugin-eslint": "^4.5.13",
    "@vue/cli-service": "^4.5.13",
    "axios": "^0.21.1",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.8.0",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.12"
  },

vue.js webpack axios

2022-09-30 15:39

1 Answers

Judging from the error message, port is called a function even though it is not a function.

In register, there is a call called axios.port(...), but isn't this correct axios.post(...)?

2022-09-30 15:39

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656