%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="container">
<div class="row">
<div class="col-sm-12">
<primary-title-component title="Exhibits"></primary-title-component>
</div>
</div>
<div class="row">
<div class="col-sm-4" v-for="category in categories">
<image-component :image="category.preview"></image-component>
<secondary-title-component :title="category.name"></secondary-title-component>
</div>
</div>
<transition name="fade">
<div class="row" v-if="pagination.links && pagination.links.next">
<div class="col-sm-2 mx-auto">
<button class="btn btn-outline-primary btn-block" @click="loadMore()">
Load more
</button>
</div>
</div>
</transition>
</div>
</template>
<script>
import PrimaryTitleComponent from "../components/PrimaryTitleComponent.vue";
import SecondaryTitleComponent from "../components/SecondaryTitleComponent.vue";
import ImageComponent from "../components/ImageComponent.vue";
export default {
name: 'Home',
components: {
PrimaryTitleComponent,
SecondaryTitleComponent,
ImageComponent
},
data() {
return {
categories: [],
pagination: {}
};
},
methods: {
getPosts: function (api) {
let vm = this;
vm.axios.get(api).then(function (response) {
vm.categories = vm.categories.concat(response.data.data);
vm.pagination = response.data.meta.pagination;
});
},
loadMore: function () {
this.getPosts(this.pagination.links.next);
}
},
created() {
this.getPosts('/api/categories');
}
}
</script>
Zerion Mini Shell 1.0