I'm just getting started with VueJs I have a refresh button when I click on it I want it to reload/refresh a component and a table I have, I tried the forceUpdate method as well as the key changing method but it doesn't seem to work. Does anyone knows how can I make it work? Thank you!
Here's my button:
<v-col cols="1" style="max-width: 40px;">
<v-icon @click="refreshList">mdi-refresh</v-icon>
</v-col>
refreshList is the method called but it's empty till now since nothing has worked yet
Here's the component I want to reload:
<v-row dense>
<v-col cols="12">
<statusBar :stat="stats" mode="site"/>
</v-col>
</v-row>
And here's the table I want to reload:
<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>
You should update the data passed to the statusBar
component. Since props are reactive, it will re-render.
refreshList() {
....logic to update `stats`....
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.