Nuxt.js #008 – APIで取得した値をリストで表示

APIで取得した値をリストで表示するメモ。

axios.vue

<template>

    <!--JSON取得結果表示-->
    <ul>
        <li v-for="r in result.results">{{r.artistName}} - {{r.artistLinkUrl}}</li>
    </ul>

</template>


<style>


</style>


<script>

    // axios読み込み008
    import axios from "axios";

    export default {
        async asyncData({ params }) {
            // JSON取得
            const response = await axios.get("https://itunes.apple.com/search?term=owen&media=music&entity=musicArtist&country=jp&lang=ja_jp&limit=10");
            return { result: response.data }
        }
    }

</script>

• 参考文献
  Nuxt.js