I have set up a table using tabulator in VueJs. I have followed the instructions for tabulator setup in VueJs from: http://tabulator.info/docs/4.1/frameworks#vue Here, I am trying to fetch data from the table. For some reason, I am unable to fetch. I an see my table but without data. Here is my code:
<template>
<div ref="table"> </div>
</template>
<script>
var Tabulator = require('tabulator-tables')
export default {
name: 'Location',
data: function () {
return {
tabulator: null, // variable to hold your table
location: [] // data for table to display
}
},
watch: {
// update table if data changes
location: {
handler: function (newData) {
this.tabulator.replaceData(newData)
},
deep: true
}
},
created: function () {
console.log('Location', this.$refs)
this.initialize()
},
mounted () {
// instantiate Tabulator when element is mounted
this.tabulator = new Tabulator(this.$refs.table, {
data: this.location, // link data to table
addRowPos:"bottom",
columns: [
{title: 'Code', field: 'code', sorter: 'string',width: 100, editor: 'input' , validator: "required"},
{title: 'Name', field: 'name', sorter: 'string', width: 200 , validator: "required",editor:"autocomplete", editorParams:{allowEmpty:true, showListOnEmpty:true, values:true}},
{title: 'Under', field: 'under', sorter: 'string', width: 200, editor: 'input' , validator: "required"},
{title: 'Status', field: 'status', sorter: 'string',width: 100, editor: 'input' , validator: "required"},
{title: 'Description', field: 'description', sorter: 'string', width: 200, editor: 'input' , validator: "required"},
{title: 'Depth', field: 'depth', sorter: 'string', width: 100, editor: 'input' , validator: "required"}
]
})
//Reset table contents on "Reset the table" button click
$("reset").click(function(){
table.setData(tabledata);
})
},
}
</script>
<template>
<div ref="table">
</div>
</template>
<script>
var Tabulator = require('tabulator-tables')
export default {
name: 'Location',
data: function () {
return {
tabulator: null, // variable to hold your table
location: [] // data for table to display
}
},
watch: {
// update table if data changes
location: {
handler: function (newData) {
this.tabulator.replaceData(newData)
},
deep: true
}
},
created: function () {
console.log('Location', this.$refs)
this.initialize()
},
methods: {
initialize () {
axios.get('/api/location')
.then(response => this.location = response.data.location)
}
},
mounted () {
// instantiate Tabulator when element is mounted
this.tabulator = new Tabulator(this.$refs.table, {
data: this.location,
layout:"fitDataStretch",
movableColumns:true,
addRowPos:"bottom",
// link data to table
columns: [
{title: 'Code', field: 'code', sorter: 'string',width: 100, editor: 'input' , validator: "required"},
{title: 'Name', field: 'name', sorter: 'string', width: 200 , validator: "required",editor:"autocomplete", editorParams:{allowEmpty:true, showListOnEmpty:true, values:true}},
{title: 'Under', field: 'under', sorter: 'string', width: 200, editor: 'input' , validator: "required"},
{title: 'Status', field: 'status', sorter: 'string',width: 100, editor: 'input' , validator: "required"},
{title: 'Description', field: 'description', sorter: 'string', width: 200, editor: 'input' , validator: "required"},
{title: 'Depth', field: 'depth', sorter: 'string', width: 100, editor: 'input' , validator: "required"}
]
});
},
}
</script>
<style scoped>
</style>