Vue
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="app.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://rawgit.com/matfish2/vue-tables-2/master/dist/vue-tables-2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="main">
<h3 class="vue-title">Guides</h3>
<div id="app">
<v-client-table :columns="columns" :data="data" :options="options">
<a slot="uri" slot-scope="props" target="_blank" :href="props.row.uri" ></a>
<div slot="child_row" slot-scope="props">
</div>
</v-client-table>
</div>
Vue
Vue.use(VueTables.ClientTable);
var vue = new Vue({
el: "#app",
data: {
columns: ['name', 'username', 'address.street', 'address.suite', 'address.geo.lat', 'address.city'],
data: [],
options: {
headings: {
name: 'Name',
username: 'Username',
},
sortable: ['name', 'username', 'address.street', 'address.suite', 'address.city'],
filterable: ['name', 'username', 'address.street', 'address.suite', 'address.city']
},
created: function() {
Vue.http.get("https://jsonplaceholder.typicode.com/users").then(response => {
this.json = response.body;
console.log("TEST on created: " + json);
});
}
}
});
Vue.http.get("https://jsonplaceholder.typicode.com/users").then(response => { vue.data = response.body; });