As a beginner in VueJs, I am facing an issue with reloading a component and table when a refresh button is clicked. I have tried using the forceUpdate method and changing keys, but it has not been successful so far.
If anyone has any suggestions on how to make this work, I would greatly appreciate it. Thank you!
Below is the code for the refresh button:
<v-col cols="1" style="max-width: 40px;">
<v-icon @click="refreshList">mdi-refresh</v-icon>
</v-col>
The method 'refreshList' is currently empty as none of the previous approaches have worked yet.
Here is the component that needs to be reloaded:
<v-row dense>
<v-col cols="12">
<statusBar :stat="stats" mode="site"/>
</v-col>
</v-row>
And here is the table that also needs to be reloaded:
<v-col cols="8">
<v-data-table
:headers="headers"
:items="displayed"
:search="search"
:loading="loading"
style="background-color: #292B3D;"
@click:row="openDetail">
<template v-slot:[`item.status`]="{ item }">
<v-chip
v-if="naming[item.status].color == '#FFFFFF'"
class="ma-2"
text-color="black"
:color="naming[item.status].color">
{{ naming[item.status].lib }}
</v-chip>
<v-chip
v-else
class="ma-2"
:color="naming[item.status].color">
{{ naming[item.status].lib }}
</v-chip>
</template>
<template v-slot:[`item.connectors`]="{ item }">
<cardConnector :data="item.connectors"></cardConnector>
</template>
</v-data-table>
</v-col>