在 vue JS 中重新加载组件

Question

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>

Answer 1

You should update the data passed to the statusBar component. Since props are reactive, it will re-render.

refreshList() {
 ....logic to update `stats`....
}