I'm currently working on a node and electron application that utilizes vuetify to create a table (v-data-table) fetching data from an oracle database. The issue I'm facing is that even though the data changes based on the input value, the table fails to update!
Here's what happens when the input values change: process.env.ANO_SEM = input.val()
After this change, I trigger the loadData() function
Process.env.ANO_SEM serves as a parameter for the SQL query in the getEventos() function
This is my current code:
$('#input').keyup(e => {
if (e.keyCode == 13) {
process.env.ANO_SEM = $('#input').val()
loadData()
}
})
// Getting data from the Database
async function getEventos() {
const sql = await fs
.readFileSync(path.join(process.env.ROOT_PATH, 'src/db/sql/get-evento.sql'))
.toString()
return await db.getData(sql, [process.env.ANO_SEM])
}
async function loadData() {
let data = await getEventos()
console.log(data) // The data always changes, but the table never updates
new Vue({
el: '#app',
methods: {
rowClick(idEvento) {
require(path.join(process.env.CTRL_PATH, './evento/evento-ctrl.js'))(
window.$,
idEvento
)
}
},
data: function() {
return {
selectedItem: 'Sample',
pagination: {
sortBy: 'ID'
},
headers: [
{ text: 'ID', value: 'ID', align: 'center', width: '10%' },
{ text: 'Descrição', value: 'DESCRICAO', align: 'left', width: '60%' },
{ text: 'PerÃodo', value: 'PERIODO', align: 'left', width: '20%' },
{
text: 'Data Impressão',
value: 'DATA_IMPRESSAO',
align: 'left',
width: '10%'
}
],
eventos: data
}
}
})
}
Here's my HTML code:
<div id="app" class="table-eventos">
<v-app>
<v-data-table
:headers="headers"
:items="eventos"
:rows-per-page-items="[100]"
item-key="name"
class="elevation-1"
>
<!-- :pagination.sync="pagination" -->
<template slot="items" slot-scope="props">
<tr @click="rowClick(props.item.ID)">
<td class="text-xs-left">{{ props.item.ID }}</td>
<td class="text-xs-left">{{ props.item.DESCRICAO }}</td>
<td class="text-xs-left">{{ props.item.PERIODO }}</td>
<td class="text-xs-left">{{ props.item.DATA_IMPRESSAO }}</td>
</tr>
</template>
</v-data-table>
</v-app>
</div>