VUE JS中的重新加载组件

Question

我刚开始使用vuejs 当我单击它时，我有一个刷新按钮，我希望它重新加载/刷新一个组件和一个桌子，我尝试了forceupdate方法以及关键更改方法，但似乎不起作用。 有人知道如何使它起作用吗？ 谢谢你！

这是我的按钮：

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

刷新清单是一种方法，但它是空的，到现在为止，

这是我想重新加载的组件，

<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`....
}