JSFiddle - React, Tailwind, and code Playground

by Alex Kyriakidis

HTML

<script src="https://cdn.jsdelivr.net/vue/1.0.24/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.2/vue-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuejs-paginator/1.0.11/vuejs-paginator.js"></script>
<h3>
                  List animals from a remote source.
                </h3>
                <div id="live-example">
                  <ul class="list-group">
                    <li class="list-group-item" v-for="animal in animals">
                      {{ animal.name }}
                    </li>
                  </ul>
                  <h3>
                    Navigate.
                  </h3>
                  <span class="glyphicon glyphicon-hand-right icon-left animated shake"></span>
                  <v-paginator :options="options" :resource.sync="animals" :resource_url="resource_url"></v-paginator>
                  <h3>
                    $data updates instantly.
                  </h3>
                  <pre>{{ $data | json }}</pre>
                </div>

JavaScript

var vm = new Vue({
    el: '#live-example',
    components: {
        VPaginator: VuePaginator
    },
    data: {
        animals: [],
        resource_url: 'https://hootlex.github.io/vuejs-paginator/samples/animals2.json',
        options: {
        	previous_button_text: 'Go Previous',
            next_button_text: 'Go Next'
        }
    }
});