備忘録

備忘録

Vue.jsでaxiosを使ってJSONデータを利用する

Ⅰ. はじめに

タイトルの通り「Vue.jsでaxiosを使ってJSONデータを利用する」サンプルです。

以下のJSONから

[
  { "name" : "name001" },
  { "name" : "name002" },
  { "name" : "name003" }
]

以下のように出力するサンプルです。

  • name001
  • name002
  • name003

Ⅱ. サンプル

https://codepen.io/kagasu/pen/brbydZ

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
    <div id="app">
      <ul>
        <li v-for="character in characters">
          {{character.name}}
        </li>
      </ul>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>

    <script>
    var app = new Vue({
      el: '#app',
      data: {
        characters: []
      },
      methods: {
        getCharacters() {
          var url = 'https://gist.githubusercontent.com/anonymous/c41ae1698aca3595b95d1496ebf42d83/raw/2addeb281bcb4aae2be9c8204c0ec623c4cb446c/characters.json';
          axios.get(url).then(x => { this.characters = x.data; });
        }
      },
      mounted() {
        this.getCharacters();
      }
    })
  </script>
  </body>
</html>