Vue.js vue-json-componentを使ってJSONデータをtree表示する

2024年1月7日

環境
node v12.13.1
npm 6.13.2
@vue/cli 4.1.1

1.プロジェクト「vueapp」を作成します
vue create vueapp

2.vue-json-componentをインストールします
## 移動
cd vueapp

## インストール

vue i -S vue-json-component
npm i -S axios

3.src配下のApp.vueを編集します

<template>
  <div id="app">
    <JSONView :data="data" />
    <JSONView :data="users" />
  </div>
</template>

<script>
import { JSONView } from 'vue-json-component';
import axios from 'axios';
export default {
  name: "App",
  components: {
    JSONView
  },
  data(){
    return{
      users: [],
      data:[{ "name": "佐藤", "age": 23 },{ "name": "二郎", "age": 18},{ "name": "太郎", "age": 31 }]
    }
  },
  mounted(){
        axios.get('https://randomuser.me/api/',
            {
              params: {
                results: '10'
              }
            })
        .then(response => this.users = response.data.results)        
    }
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  text-align: center;
  width: 800px;
}
</style>

4.Vue.jsを起動する
npm run serve
ブラウザから http://プライベートIP:8080 に アクセスする