Vue.js vue-json-componentを使ってJSONデータをtree表示する
環境
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 に アクセスする