Nuxt.js の http クライアントの使い方 (Post)

npx create-nuxt-app proj01

<!-- post.vue -->
<template>
  <section class="container">
      <h2>{{title}}</h2>
    <pre>{{data_aa}}</pre>

<table>
<tr><th>args</th>
<td> {{data_aa.args}} </td></tr>
<tr><th>headers</th>
<td> {{data_aa.headers}} </td></tr>
<tr><th>origin</th>
<td> {{data_aa.origin}} </td></tr>
<tr><th>url</th>
<td> {{data_aa.url}} </td></tr>
<tr><th>json</th>
<td> {{data_aa.json}} </td></tr>
</table>
    <hr>
    <p>{{now}}</p>

 </section>
</template>

<script>

const axios = require('axios')

const url = 'https://httpbin.org/post'



export default {
    data: function(){
    return {
        title: 'http Post',
        now: 'お待ち下さい...',
        };
    },

    asyncData: async function () {
        const args = {
            data: { user: "jiro", password: "123456" },
            headers: { "Content-Type": "application/json" }
            };
        let result = await axios.post(url,args);
        return {data_aa: result.data};
    },
    created: function (){
        setInterval(() =>{
    var d = new Date();
    this.now = d.getHours()
        + ':' + d.getMinutes()
        + ':' + d.getSeconds();
    },1000);
    },
};
</script>

<style>
.container {
    padding: 5px 10px;
}
h2 {
    font-size: 30pt;
    color: green;
}

p {
    padding-top:5px;
    font-size: 20pt;
    color: cyan;
}

pre {
    padding: 10px;
    font-size: 10pt;
    color: blue;
}

hr {
    margin:10px 0px;
}

</style>

yarn dev