元号API 動作サンプル

html

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/ja.js"></script> <div id=app> <table class="table table-striped"> <tr> <t h scope="col">#</th> <th scope="col">元号名</th> <th scope="col">よみがな</th> <th scope="col">記号</th> <th scope="col">始期</th> <th scope="col">終期</th> <th scope="col">期間</th> <th scope="col">暦法</th> <th scope="col">備考</th> </tr> </thead> <tbody> <tr v-for="(val, index) in items.gengoh"> <th scope="row">{{ val.id }}</th> <td>{{ val.name }}</td> <td>{{ val.yomi }}</td> <td>{{ val.kigou }}</td> <td class="text-right">{{ val.bgn | moment }}</td> <td class="text-right">{{ val.end | moment }}</td> <td class="text-right">{{ val.years }}年</td> <td>{{ (val.rekihou=='1')?'ユリウス暦':'グレゴリオ暦' }}</td> <td>{{ val.notes }}</td> </tr> </tbody> </table> </div>

javascript

<script> let app=new Vue({ el:'#app', data: { items:{} }, methods:{ readGengoh:function(e){ console.log(this) let config={ headers:{ 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }, withCredentials:true, responseType:'json' } axios .get('https://gengoh.jp/api/?api_key=bdd3pmjyc8jbsgnrt9mpjr3xyza7kjff&bgn=100-01-01&format=4&sort=1&unicode=2',{responseType:'json'}) .then(function(r){ app.items=r.data; }) .catch(function(e) { console.log(e); }) } }, mounted(){ this.readGengoh() }, filters:{ moment:function(d){ return moment(d).format('YYYY年MM月DD日') } } }) </script>

実行結果