Vue

by rubanraj54

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-bootstrap4-table.min.js"></script>
<div id="app">
  <vue-bootstrap4-table :data="data" :config="config" />
</div>

Vue

new Vue({
        el: "#app",
        data: {
            data: {
                rows: [],
                columns: [{
                        label: "id",
                        name: "id",
                        filter: {
                            type: "simple",
                            placeholder: "id"
                        },
                        sort: true,
                        uniqueId: true
                    },
                    {
                        label: "title",
                        name: "title",
                        filter: {
                            type: "simple",
                            placeholder: "title"
                        },
                        sort: true
                    },
                    {
                        label: "url",
                        name: "url",
                        filter: {
                            type: "simple",
                            placeholder: "Enter url"
                        }
                    }
                ]
            },
            config: {
                pagination: true,
                num_of_visible_page: 7,
                per_page: 10,
                checkbox_rows: true
            }
        },
        methods: {
            toggle: function(todo) {
                todo.done = !todo.done
            }
        },
    
        mounted() {
            let self = this;
            axios.get('https://jsonplaceholder.typicode.com/photos')
                .then(function(response) {
                    // handle success
                    self.data.rows = response.data.slice(0,100);
                    // console.log(response);
                })
                .catch(function(error) {
                    // handle error
                    console.log(error);
                });
        },
    })