Vueでaxiosを使った送信が出来ない

Question

axiosを使用してデータの送信を行いたいのですが、下記のエラーが出てしまいます。

Error in v-on handler: "TypeError: axios.post(...).them is not a function"

下記のサイトなどを見てみましたが、解決できませんでした。
https://stackoverflow.com/questions/57283630/vue-warn-error-in-v-on-handler-typeerror-cannot-read-property-fire-of-un

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

new Vue({
    el: '#app',
    data: {
        name: '',
        email: '',
        subjectId: '',
        text: '',
        subjects: {
            1: '商品に関するご質問',
            2: 'お支払に関するご質問',
            3: 'ショッピングに関するご質問',
            4: 'ご質問・その他',
        }
    }
});

<template>
  <div class="uk-card uk-card-default uk-card-body uk-width-1-2@m">
      <h3 class="uk-card-title">お問い合わせ</h3>
      <form v-if="!emailSent">
        <p v-if="errors.length">
          <b class="kakuninn">入力内容に不備があります。下記を確認してください</b>
          <ul>
            <li class="mini" v-for="error in errors">{{ error }}</li>
          </ul>
        </p>
          <label>名前
            <input type="text" v-model="name">
            <div class="error_txt" v-html="errors.name"></div>
          </label>
          <label>メールアドレス
            <input type="text" v-model="email">
            <div class="error_txt" v-html="errors.email"></div>
          </label>
          <label>用件
            <select v-model="subjectId">
              <div class="error_txt" v-html="errors.subjectId"></div>
              <option value=""></option>
              <option v-for="(subject, id) in subjects" :value="id" v-text="subject"></option> 
            </select>
          </label>
          <label>お問い合わせ内容
            <textarea class="text" rows="10" placeholder="お問い合わせの内容をご入力ください。" v-model="text"></textarea>
            <div class="error_txt" v-html="errors.text"></div>
          </label>
          <button class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-bottom" type="button" v-on:click="checkForm">送信する</button>
      </form>
      <div v-if="emailSent">メッセージが送信されました。ありがとうございました。</div>
  </div>
</template>

<script>

export default {
  data: function(){
    return {
      name: '',
      email: '',
      subjectId: '',
      text: '',
      subjects: {
            '1' : '商品に関するご質問',
            '2' : 'お支払に関するご質問',
            '3' : 'ショッピングに関するご質問',
            '4' : 'ご質問・その他',
            },
      errors: {},
      emailSent: false
    }
  },

methods: {

    checkForm: function(e) {
      this.errors = [];
      console.log(e)
      if(!this.name){
        this.errors.push("名前は必須です");
      }
      if(!this.email){
        this.errors.push("メールアドレスは必須です")
      } 
      
      
      if(!this.subjectId){
        this.errors.push("用件を入力してください");
      }
      if(!this.text){
        this.errors.push("お問い合わせの内容を入力してください");
      }
      e.preventDefault();

      var params = {
        name: this.name,
        email: this.email,
        subject: this.subject,
        text: this.text
      }

      var self = this;

      axios.post('/contact', params)
      .them(function(response){
        console.log(response)
        // self.emailSent = true
      })
      .catch(function(error){
        console.log(error.response)
        // var errors = {};

        // for(var key in error.response.data.errors) {
        //   errors[key] = error.response.data.errors[key].join('<br>');
        // }
        // self.errors = errors;
      });
    },

public function send(ContactRequest $request)
    {
        $subjects = [
            '1' => '商品に関するご質問',
            '2' => 'お支払に関するご質問',
            '3' => 'ショッピングに関するご質問',
            '4' => 'ご質問・その他',
        ];

        $params = [
            'name' => $request->name,
            'email' => $request->email,
            'subjectId' => $request->subjectId,
            'text' => $request->text,
            'subject' => $subjects[$request->subjectId]
        ];
        // eval(\Psy\sh());
        \Mail::to('test@.com')->send(new Contacted($params));
    }

Route::get('/contact', 'ContactController@input');
Route::post('/contact', 'ContactController@send');

自分だけでは原因を見つけることができませんでした。

どなたかご教授お願いします。

php 7.4
laravel 6.0
vue@2.6.11

Answer 1

エラーメッセージにあるとおり、axios.post(...).themの部分が誤っています。
axios.postはPromiseを返すので、正しくは、axios.post(...).thenだと思います。

https://github.com/axios/axios#example

Comments

[tenlife]

ありがとうございます。エラーをもう少し確認するべきでした。