Spring Boot + Doma2 で作ったapiを Vue.js から呼び出し、リストを構築してみた。
今まではjQueryのajaxを利用してapiのデータを受け取っていたが、今回はvue-resourceというものを利用してみた。

pickup.html

<table id="pickup" class="table table-bordered">
	<thead>
		<tr>
			<th></th>
			<th>タイトル</th>
			<th>開始日</th>
		</tr>
	</thead>
	<tbody>
		<tr v-for="item in items">
			<td><img src="{{ item.image }}" width="100" /></td>
			<td>{{ item.title }}</td>
			<td>{{ item.period}}</td>
		</tr>
	</tbody>
</table>
<a href="javascript:append();">append</a>
<script type="text/javascript" th:inline="javascript">/*<![CDATA[*/
	var list = [];
	new Vue({
		el: '#pickup',
		data: {
			items: list
		}
	})
	function append() {
		Vue.http.get('/api/pickup?offset=' + list.length).then((response) => {
			for (i = 0; i < response.body.length; i++) {
				list.push(response.body[i]);
			}
		});
	}
	append();
/*]]>*/</script>

今回は Thymeleaf を利用しているので、