質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.57%

フロント: Vue.js, バックエンド: Laravelでdataプロパティがないとのエラー

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 572

kokaa

score 12

現在バックエンドAPIをLaravel、フロントをvue.jsで制作しているのですが、

ログインボタンを押した際にブラウザのconsoleで下記エラーとなります。
dataプロパティがないとありますが原因がよくわからず、どなたかご教示頂けますと幸いです。

Uncaught (in promise) TypeError: Cannot read property 'data' of undefined

下記それぞれVue.jsのコードです。

Login.vue

 <template>
     <v-container>
         <v-form @submit.prevent="login">

             <v-text-field
             label="E-mail"
             v-model="form.email"
             type="email"
             required
             ></v-text-field>

             <v-text-field
             label="Password"
             v-model="form.password"
             type="password"
             required
             ></v-text-field>

             <v-btn
             color="green"
             type="submit"
             >Login</v-btn>
         </v-form>
     </v-container>
 </template>

 <script>
 export default {
     data(){
         return {
             form :{
                 email:null,
                 password:null
             }
         }
    },
    methods:{
        login(){

       //Userクラスで処理
            User.login(this.form)
        }
    }
}
 </script>

 <style>

 </style>

User.js

class User {
  login(data){
      axios.post('/api/auth/login',data)
          .then(res => this.responseAfterLogin(res))
          .catch(error => console.log(error.response.data))
  }
}
export default User = new User();

この状態でログインボタンを押すと上記のdataプロパティがないとのエラーになります。

ですが、Userクラスに処理を分割せず、Userクラスの内容をそのままLogin.vueのメソッドに書くとエラーがでず正常に動作します。

 <script>
 export default {
     data(){
         return {
             form :{
                 email:null,
                 password:null
             }
         }
    },
    methods:{
        login(){
            // User.login(this.form)

       //Userクラスに分割した内容をLogin.vueに直接書くとエラーがでない
            axios.post('/api/auth/login',this.form)
            .then(res => console.log(res.data))
            .catch(error => console.log(error.response.data))
        }
    }
}
 </script>

なぜUserクラスに分割しているとエラーになるのかがわかりません。
どなたかご教示お願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.57%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る