<template>
  <div>
    <div v-for="post in posts">
      <p>{{post.title}}</p>
      <p>{{post.content}}</p>
    </div>
  </div>
  <template>
    <script>
      export default {
        data() {
          return {
            posts: [],
          }
        },
        created() {
          this.test()
        },
        methods: {
          test: function () {
            axios
              .get("/test")
              .then(res => {
                console.log(res)
                this.posts = res.data.posts
              })
              .catch(err => {
                console.log(err)
              })
          },
        },
      }
    </script></template
  ></template
>

基本的な書き方 POST

<template>
  <div>
    <input v-model="title" />
    <textarea v-model="content"></textarea>
    <button type="button" @click="test">送信</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        title: "",
        content: "",
      }
    },
    methods: {
      test: function () {
        axios
          .post("/test", {
            title: this.title,
            content: this.title,
          })
          .then(res => {
            console.log(res)
            this.posts = res.data.posts
          })
          .catch(err => {
            console.log(err)
          })
      },
    },
  }
</script>

GET の解説

GET は主にデータの取得で使っていきます。

    test: function(){
      axios.get('/test').then(res=>{
        console.log(res)
        this.posts = res.data.posts
      }).catch(err=>{
        console.log(err)
      })
    }

このコードの中の

axios.get('/test')

ここの 1 行で用意された URL（エンドポイントなんて言われたりもします）にデータをくださいと言っています。

.then(res=>{
console.log(res)
this.posts = res.data.posts
})

.then の中には、URL に「データをください」をした結果、成功した内容を書きます。

今回で言うと、何が返ってきたのかを確認する

console.log と、返ってきた posts のデータを Vue のデータに持たせています。

.catch(err=>{
        console.log(err)
      })

catch は「データください」が失敗した時の記述になります。ここは色々書けますが、今回ははしょります。

これで基本的な axios の get の関数が出来上がりました。

しかし、これではだめです。

関数は定義しただけだと動かないので発動させる必要があります。

  created() {
    this.test()
  },

この部分で、いま作成した関数を発動させています。 created()はコンポーネントが呼ばれた時に発動する関数です。直接この中に書くこともできるのですが、今回は、

this.test()

とかいて、定義した関数を呼び出しています。

  data(){
    return {
      posts: []
    }
  },

この部分で、このコンポーネントで使うデータを定義しつつ、初期値を書いています。

これがないと、「データをください」が成功しても、そのデータを受け取る場所がないのでエラーになってしまいます。

今回は、空の配列を初期値として入れています。

<template>
  <div>
    <div v-for="post in posts">
      <p>{{post.title}}</p>
      <p>{{post.content}}</p>
    </div>
  </div>
<template>

表示の部分です。v-for で配列の数だけ表示を回しています。

POST の解説

次に、テキストを入力して、「送信」を押したらデータが入力されるようなものを作っていきます。

 methods: {
    test: function(){
      axios.post('/test',{
        title: this.title,
        content: this.title
      }).then(res=>{
        console.log(res)
        this.posts = res.data.posts
      }).catch(err=>{
        console.log(err)
      })
    }
  },

また分解して説明していきます。

   axios.post('/test',{
        title: this.title,
        content: this.title
      })

ここは、/test と言う URL（エンドポイント）に対して post 送信しますよと言うものになります。

そして、第二引数の

{
    title: this.title,
    content: this.title
}

ここで、送信するデータを書いています。

オブジェクトの key が name となって、右側が Value になります。

Laravel でいえば、

$request->title と書けば、 this.title の中身が伝わってきています。

.then と、.catch に関しては GET の時と同じです。

レスポンスがどのようになっているかは API 側の仕様なので、Console で中身を見ながら書いていくと思います。

 data(){
    return {
      title: '',
      content: ''
    }
  }

GET の時と同じように、送信するテキストの受け皿的なところを定義します。

初期値は、空のテキストと言うことで''とかいています。

<template>
  <div>
    <input v-model="title">
    <textarea v-model="content"></textarea>
    <button type="button" @click="test">送信</button>
  </div>
<template>

input や textarea に対して、v-model を使って、先ほど data()に定義した title と content のところが、入力されたデータと同じになるようになっています。

まとめ

Vue の axios の GET と POST の基本的な記述をサンプルとして書いてみました。

最初は慣れるまで大変だと思いますが、一番最初にこれをみた人がわかりやすければ幸いでございます。

この記事に関する質問は、Twitter で DM してもらえればと思います。

それでは。

フィードバックのお願い

この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。