Nuxt.js のサンプル (JSON の取り込み）

15688 ワード
JSON Vue.js nuxt.js Web JSON テキストリンク

こちらと同様のことを Nuxt.js で行ってみました。
Vue.js のサンプル (JSON の取り込み）
入力のJSONは、同じ形式のものです。

実行結果

プロジェクトの作成

npx create-nuxt-app proj01

pages/index.vue を次のように変更します。

pages/index.vue
<template>
  <section class="container">
      <h2>{{title}}</h2>

<table>
<tr v-for="(value,key) in cities">
    <td> {{key}} </td>
    <td> {{value.name}} </td>
    <td> {{value.population}} </td>
    <td> {{value.date_mod}} </td>
</tr>
</table>
    <hr>
    <pre>{{now}}</pre>

 </section>
</template>

<script>

import cities from '@/static/cities.json'


export default {
    data: function(){
    return {
        title: '栃木県の都市',
        now: 'お待ち下さい...',
        cities: cities,
        };
    },

    created: function (){
        setInterval(() =>{
    var d = new Date();
    this.now = d.getHours()
        + ':' + d.getMinutes()
        + ':' + d.getSeconds();
    },1000);
    },
};
</script>

<style>
.container {
    padding: 5px 10px;
}
h2 {
    font-size: 30pt;
    color: green;
}

p {
    padding-top:5px;
    font-size: 20pt;
    color: cyan;
}

pre {
    padding: 10px;
    font-size: 18pt;
    color: blue;
}

hr {
    margin:10px 0px;
}

</style>
static/cities.json
{
  "t0921": {
    "name": "宇都宮",
    "population": 57214,
    "date_mod": "2012-4-12"
  },
  "t0922": {
    "name": "小山",
    "population": 31857,
    "date_mod": "2012-7-15"
  },
  "t0923": {
    "name": "佐野",
    "population": 94167200,
    "date_mod": "3920-7-28"
  },
  "t0924": {
    "name": "足利",
    "population": 31764,
    "date_mod": "2012-2-22"
  },
  "t0926": {
    "name": "下野",
    "population": 65792,
    "date_mod": "2012-9-12"
  },
  "t0927": {
    "name": "さくら",
    "population": 36251,
    "date_mod": "2012-3-21"
  },
  "t0928": {
    "name": "矢板",
    "population": 52186,
    "date_mod": "2012-7-26"
  },
  "t0929": {
    "name": "真岡",
    "population": 26857,
    "date_mod": "2012-10-2"
  },
  "t0930": {
    "name": "栃木",
    "population": 41893,
    "date_mod": "2012-12-20"
  },
  "t0931": {
    "name": "大田原",
    "population": 45289,
    "date_mod": "2012-2-7"
  },
  "t0932": {
    "name": "鹿沼",
    "population": 92354,
    "date_mod": "2012-5-17"
  },
  "t0933": {
    "name": "那須塩原",
    "population": 81567,
    "date_mod": "2012-6-19"
  },
  "t0934": {
    "name": "那須烏山",
    "population": 72158,
    "date_mod": "2012-8-14"
  }
}

サーバーの実行

yarn dev

ブラウザーで、http://localhost:3000/　にアクセス。