Vue
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(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,50);
// console.log(response);
})
.catch(function(error) {
// handle error
console.log(error);
});
},
})