在 vue JS 中重新加载组件

Question

我刚刚开始使用 VueJs 我点击它时有一个刷新按钮 我希望它重新加载/刷新我拥有的组件和表，我尝试了 forceUpdate 方法以及密钥更改方法，但它没有似乎工作。 有谁知道我怎样才能让它工作？ 谢谢！

这是我的按钮：

<v-col cols="1" style="max-width: 40px;">
  <v-icon @click="refreshList">mdi-refresh</v-icon>
</v-col>

refreshList 是调用的方法，但到目前为止它是空的，因为还没有任何效果

这是我要重新加载的组件：

<v-row dense>
  <v-col cols="12">
    <statusBar :stat="stats" mode="site"/>
  </v-col>
</v-row>

这是我要重新加载的表：

             <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

您应该更新传递给statusBar组件的数据。 由于道具是反应性的，它会重新渲染。

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