JSFiddle - React, Tailwind, and code Playground

by spitfire378

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/axios/dist/axios.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<div id="app">
  <b-table striped hover :items="posts"></b-table>
  <b-pagination-nav base-url="#" :number-of-pages="numberOfPages" v-model="currentPage" @click.native="loadPosts()"/>
  {{ currentPage }}
</div>

CSS

#app {
  margin: 20o
}

Vue

var app = new Vue({
  el: '#app',
  data () {
	  return {
	    posts: [],
    	currentPage: 1,
      numberOfPages: 30
    }
  },
  methods: {
  	getPosts () {
    	axios.get(`https://cors-anywhere.herokuapp.com/jsonplaceholder.typicode.com/posts?_start=${this.currentPage * 2}&_limit=2`)
        .then(response => {
          // JSON responses are automatically parsed.
          this.posts = response.data
        })
        .catch(e => {
          this.errors.push(e)
        })    	
    },
    loadPosts () {
      this.$nextTick(function () {
				this.getPosts()
      })
    }    
  },
  mounted () {
		this.getPosts()
  }
})