Twitter APIからいいねを取得しVue.jsとBootstrapでカード表示
HTML
<div id="app" class="card-columns"> <div class="card" v-for="favorite in favorites"> <template v-if="favorite.extended_entities != ''"> <template v-for="entity in favorite.extended_entities"> <template v-for="media in entity"> <img class="card-img-top img-fluid" v-bind:src="media.media_url_https" alt=""> </template> </template> </template> <div class="card-block"> <p class="card-text">{{ favorite.text }}</p> </div> </div> </div>
var app = new Vue({ el: '#app', data: { favorites: [] }, mounted() { axios.get("https://xxx") .then(response => { this.favorites = response.data }) } })