Skip to content

Instantly share code, notes, and snippets.

@tghelere
Created June 24, 2018 16:42
Show Gist options
  • Save tghelere/8bf3e98fc4c208fedf568149c4e32035 to your computer and use it in GitHub Desktop.
Save tghelere/8bf3e98fc4c208fedf568149c4e32035 to your computer and use it in GitHub Desktop.
<template>
<b-container>
<b-row>
<b-col md="4" v-for="(post, index) in allPosts" :key='index' :current-page="currentPage" :per-page="perPage">
<a class="link-post" :href="'/blog/post/' + post.slug" :title="post.title" >
<div class="item-post">
<img :src="post.image" :alt="post.title" class="img-fluid img-thumbnail" >
<h4>{{post.title}}</h4>
<p>{{post.description}}</p>
</div>
</a>
</b-col>
</b-row>
<b-row>
<b-col class="my-1">
<b-pagination align="center" :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
</b-col>
</b-row>
</b-container>
</template>
<script>
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
export default {
data () {
return {
allPosts: [],
currentPage: 1,
perPage: 10,
totalRows: 0,
}
},
created() {
this.getAllPosts()
},
methods: {
getAllPosts(){
const action = '/api/posts'
axios.get(action).then(response => {
this.allPosts = response.data.data
this.totalRows = this.allPosts.length
}).catch(error => {
console.error(error)
})
},
},
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment