

## 前提・実現したいこと

Vue.jsとFirebaseでログイン機能を実装したいです。

新規登録画面で、v-modelでemailとpasswordそれぞれを結びつけ、作成したaxiosのインスタンスをimportして、axiosでエンドポイントにアクセスするregisterメソッドを定義、ボタンを押したらregisterメソッドを発火したいです。

成功すると、コンソールのObjectにデータが返ってくるはずなのですが、うまくいきません。よろしくお願いします。

### エラーメッセージ

[code]

    Error in v-on handler: "TypeError: _axios_for_auth_js__WEBPACK_IMPORTED_MODULE_0__.default.port is not a function"
    
[/code]

### 試したこと

package.jsonのdevDependenciesにaxiosがなかったせいかなと思い、axiosをインストールしました。

### 補足情報（FW/ツールのバージョンなど）

[code]

    "@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"
    
[/code]

### 該当のソースコード

Register.vue

[code]

    <template>
      <div class="container">
      <h2>新規会員登録</h2>
      <form class="login-form">
        <div class="input-group">
          <label for="email">メールアドレス</label>
          <input type="email" id="email" v-model="email">
        </div>
        <div class="input-group">
          <label for="password">パスワード</label><
          <input type="password" id="password" v-model="password">
        </div>
        <div class="input-group">
          <button type="button" @click="register()">登録</button>
        </div>
      </form>
    </div>
    </template>
    
    <script>
    import axios from '../axios-for-auth.js';
    export default {
      data() {
        return {
          email:"",
          password:""
        }
      },
      methods: {
        register() {
          axios.port(
                '/accounts:signInWithPassword?key=***************************',
                {
                  email: this.email,
                  password: this.password,
                  returnSecureToken: true
                }
          ).then((response) => {
            console.log(response);
          });
          this.email = "";
          this.pasword = "";
        }
      }
    }
    
    </script>
    
[/code]

axios-for-auth.js

[code]

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

package.json

[code]

    "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"
      },
    
[/code]


CC BY-SA 4.0
2021-05-26T03:20:46.897
76070
2021-05-26T03:48:35.757
2021-05-26T03:48:35.757
3060
45495
question
vue.js webpack axios
Vue.jsとFirebaseでログイン機能を実装したいです。


エラーメッセージから判断すると、`port`というものが関数ではないのに関数として呼ばれているようですね。

`register`の中に `axios.port(...)` という呼び出しがありますが、これは正しくは `axios.post(...)`
なのではないでしょうか?


CC BY-SA 4.0
2021-05-26T03:27:27.497
76071
2021-05-26T03:27:27.497
9464
76070
answer