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