<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>My Articles</h1>
<table border=1>
<thead>
<tr>
<th>no</th>
<th>タイトル</th>
<th>コメント</th>
<th>いいね</th>
</tr>
</thead>
<tbody>
<tr v-for="(article, idx) in items">
<td>{{idx + 1}}</td>
<td>{{article.title}}</td>
<td>{{article.comments_count}}</td>
<td>{{article.likes_count}}</td>
</tr>
</tbody>
</table>
</div>
<script src="script.js"></script>
</body>
</html>
var app = new Vue({
el: '#app',
data: {
items: []
},
mounted() {
axios.get(`https://qiita.com/api/v2/users/ohisama@github/items`).then(response => {
this.items = response.data;
}).catch(error => {
alert(error);
});
}
});
/* Styles go here */