How do I get replaceData function to work? - vue.js

Question

Unable to get replaceData, setData, or updateData to work. Using bootstrap vue and tabulator tables. API works fine. Tabulator works if I don't have the url for the API dependent on the modal select, but I need to have the modal select parameter to shorten the query results.
I've tried:
this.$refs.table.replaceData(equip)
this.$refs.tabulator.replaceData(equip)
this.$refs.tableData.replaceData(equip)
table.replaceData(equip)
tabulator.replaceData(equip)
tableData.replaceData(equip)
table.tableData.replaceData(equip)
tabulator.tableData.replaceData(equip)
The issue is under methods > bldgChange
<script>
var Tabulator = require('tabulator-tables')
export default {
name: 'Test',
data: function () {
return {
mfgVariants: [
{ mfg: 'mfgA', text: 'mfgA' },
{ mfg: 'mfgB', text: 'mfgB' },
{ mfg: 'mfgC', text: 'mfgC' }
],
modelVariants: [
{ model: 'A1', text: 'A1' },
{ model: 'B1', text: 'B1' },
{ model: 'C1', text: 'C1' }
],
buildingVariants: [
{ text: 'A' },
{ text: 'B' },
{ text: 'C' }
],
locationVariants: [
{ text: 'mechanical' },
{ text: 'electrical' }
],
classVariants: [
{ text: 'breaker' },
{ text: 'pump' },
{ text: 'generator' }
],
catVariants: [
{ text: 'high' },
{ text: 'low' },
{ text: 'gas' },
{ text: 'diesel' },
{ text: 'big' },
{ text: 'small' }
],
tabulator: null,
tableData: [
{}
]
}
},
Method
methods: {
mfgChange: function () {
console.log(this.selected)
},
bldgChange: function () {
console.log(this.selected)
var parameter = this.selected
var url = 'https://izk7c37zb3.execute-api.us-east-1.amazonaws.com/latest?Building=' + parameter
console.log(url)
fetch(url)
.then(function (response) {
return response.json()
})
.then(function (json) {
var equip = json.recordset
this.tabulator.replaceData(equip)
})
},
showTable: function () {
console.log('ok pressed')
}
},
Table
watch: {
// update table if data changes
tableData: {
handler: function (newData) {
this.tabulator.replaceData(newData)
}
},
deep: true
},
created: function () {
console.log('Page Loaded', this.$refs)
},
mounted () {
var bldgModalRef = this.$refs.bldgModalRef
bldgModalRef.show()
// instantiate tabulator
var locModalRef = this.$refs.locModalRef
var myModalRef = this.$refs.myModalRef
var catModalRef = this.$refs.catModalRef
this.tabulator = new Tabulator(this.$refs.table, {
data: this.tableData,
layout: 'fitColumns',
columns: [
{ title: 'Equipment', field: 'itemid', headerFilter: 'input' },
{ title: 'Manufacturer', field: 'mfg', headerFilter: 'input' },
{ title: 'Model', field: 'model', headerFilter: 'input' },
{ title: 'Class', field: 'class', headerFilter: 'input' },
{ title: 'Category', field: 'category', headerFilter: 'input' },
{ title: 'Description', field: 'description', headerFilter: 'input' },
{ title: 'Location', field: 'location', headerFilter: 'input' },
{ title: 'Building', field: 'building', headerFilter: 'input' }
],
cellClick: function (e, cell) {
var column = cell.getField()
var value = cell.getValue()
var name = cell
.getRow()
.getCell('itemid')
.getValue()
console.log(name, column, value)
if (column === 'mfg' || column === 'model') {
myModalRef.show()
} else if (column === 'itemid') {
alert(column + ' cannot be changed.')
} else if (column === 'description') {
alert(
column + ' is now automatically generated and cannot be changed.'
)
} else if (column === 'building' || column === 'location') {
locModalRef.show()
} else if (column === 'class' || column === 'category') {
catModalRef.show()
} else {
alert(column + ' clicked')
}
}
})
}
}
</script>
Template
<template>
<div>
<b-modal ref="bldgModalRef" v-model="modalShow" title="Buildings" #ok="showTable">
<b-container fluid>
<b-col>
Building(s)
<b-row>
<b-form-select ref="bldg" v-model="selected" v-on:change="bldgChange" :options="buildingVariants" />
</b-row>
</b-col>
</b-container>
</b-modal>
<b-modal ref="myModalRef" title="Manufacturer and Model">
<b-container fluid>
<b-col col="2">
Manufacturer
<b-row>
<b-form-select ref="mfg" v-model="selected" :change="mfgChange" :options="mfgVariants" />
</b-row>
</b-col>
<b-col col="2">
Model
<b-row>
<b-form-select ref="model" :options="modelVariants"/>
</b-row>
</b-col>
</b-container>
</b-modal>
<b-modal ref="locModalRef" title="Building and Location">
<b-container fluid>
<b-col>
Building
<b-row>
<b-form-select
ref="building"
v-model="selected"
v-on:change="buildingChange"
:options="buildingVariants"
/>
</b-row>
</b-col>
<b-col>
Location
<b-row>
<b-form-select ref="location" :options="locationVariants"/>
</b-row>
</b-col>
</b-container>
</b-modal>
<b-modal ref="catModalRef" title="Class and Category">
<b-container fluid>
<b-col>
Class
<b-row>
<b-form-select
ref="class"
v-model="selected"
v-on:change="buildChange"
:options="classVariants"
/>
</b-row>
</b-col>
<b-col>
Category
<b-row>
<b-form-select ref="category" :options="catVariants"/>
</b-row>
</b-col>
</b-container>
</b-modal>
<div ref="table"></div>
</div>
</template>

Answer 1

bldgChange: function () {
console.log(this.selected)
this.tabulator.parameter = this.selected
fetch('<API-URL>?Building=' + this.selected)
.then(response => response.json())
.then(json => this.tabulator.setData(json.recordset))
},