Create a gist now

Instantly share code, notes, and snippets.

Embed
doorkeeper apiからイベントを取得して表示
*pagesディレクトリに設置
<template>
<v-card class="mt-4 mb-4 pa-3">
<v-layout row wrap>
<v-flex xs4 v-for="(item,i) in data" :key="i">
<v-card class="blue ma-2">
<v-card-text><img :src="item.event.banner" width="100%"></v-card-text>
<v-card-text>{{item.event.title}}</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-card>
</template>
<script>
import axios from 'axios'
export default {
layout: 'event',
asyncData ({params}, callback) {
axios.get('https://api.doorkeeper.jp/events/')
.then((res) => {
var data = res.data;
console.log(data);
callback(null, {data: res.data})
})
.catch((e) => {
callback({ statusCode: 404, message: 'ページが見つかりません' })
})
}
}
</script>
layoutsディレクトリに設置
<template>
<v-app>
<v-toolbar>
<v-toolbar-title>Vuetifyテスト</v-toolbar-title>
</v-toolbar>
<nuxt />
<v-footer :fixed="fixed" app>
<span>&copy; ITkaasan</span>
</v-footer>
</v-app>
</template>
<script>
export default {
data() {
return {
title: 'Vuetify.js'
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment