【学習メモ】動かして学ぶ！Vue.js 開発入門 その11

Chapter13 JSON データを表示させてみよう

01 JSON ファイルの読み込み方

JSON を読み込む

<div id="app">
  <!-- JSON を読み込む -->
  <input type="file" v-on:change="onFileChange" />
  <p>読み込みデータ:<br />{{ loadData }}</p>
</div>

new Vue({
  el: "#app",
  data: {
    loadData: ""
  },
  methods: {
    onFileChange: function(e) {
      file = e.target.files[0];
      if (file) {
        var reader = new FileReader();
        var vm = this;
        reader.onload = function(e) {
          json = JSON.parse(e.target.result);
          vm.loadData = json;
        };
        reader.readAsText(file);
      }
    }
  }
});

test.json

[
  { "title": "A", "body": "a" },
  { "title": "B", "body": "b" },
  { "title": "C", "body": "c" }
]

結果

02 JSON データを読み込んで、コンポーネントで並べる / 03 改良する：トランジションをつける

配列データをコンポーネントで並べる

<div id="app">
  <!-- 配列データをコンポーネントで並べる -->
  <transition-group>
    <div v-for="item in dataArray" v-bind:key="item.title">
      <my-product v-bind:object="item"></my-product>
    </div>
  </transition-group>
  <button v-on:click="sortData">ソート</button>
  <button v-on:click="shuffleData">シャッフル</button>
  <p><input type="file" v-on:change="loadData" /></p>
</div>

var MyComponent = {
  props: ["object"],
  template: "<div><p>{{ object.title }}</p><p>解説：{{ object.body }}</p></div>"
};

new Vue({
  el: "#app",
  data: {
    dataArray: [
      { title: "AAA", body: "aaa" },
      { title: "BBB", body: "bbb" },
      { title: "CCC", body: "ccc" }
    ]
  },
  components: {
    "my-product": MyComponent
  },
  methods: {
    sortData: function() {
      this.dataArray.sort(function(a, b) {
        return a.title < b.title ? -1 : 1;
        return 0;
      });
    },
    shuffleData: function() {
      var buffer = [];
      var len = this.dataArray.length;
      for (var i = len; len > 0; len--) {
        var r = Math.floor(Math.random() * len);
        buffer.push(this.dataArray[r]);
        this.dataArray.splice(r, 1);
      }
      this.dataArray = buffer;
    },
    loadData: function(e) {
      file = e.target.files[0];
      if (file) {
        var reader = new FileReader();
        var vm = this;
        reader.onload = function(e) {
          json = JSON.parse(e.target.result);
          vm.dataArray = json;
        };
        reader.readAsText(file);
      }
    }
  }
});

program.json

[
  {
    "title": "Python言語",
    "body": "数値計算が得意な、シンプルなプログラミング言語です。人工知能の研究で注目の言語です。"
  },
  {
    "title": "C言語",
    "body": "ハードウェアやOS向けのプログラミング言語です。古くからある言語で、数多くのプログラミング言語の元になりました。"
  },
  {
    "title": "Java言語",
    "body": "ハードウェアに依存しないプログラミング言語です。"
  }
]

結果