javascript - Vue 如何在加载数据填充工作表之前将文本作为 v-card 中的占位符？

Question

我在 vue 中有此工作表，我希望在用户实际单击某些内容以加载数据之前有一些占位符文本，例如“单击以加载”。

目前我有这个按钮可以用数据填充工作表:

      <v-btn @click="fetchData()"> Apply Filters </v-btn>

这是将加载从 fetchData() 返回的数据的工作表:

      <v-card
           {{THE DATA}}
      </v-card>

如何在单击按钮之前让工作表包含一些占位符文本？

Answer 1

除了 Kellen 的建议，您还可以使用骨架加载器。

这是我在 codepen 上找到的例子:

模板:

   <div id="app">
      <v-app>
        <v-content>
          <v-container class="grey lighten-4">
            <div class="text-center d-flex justify-center align-center mb-12 flex-wrap">
              <v-btn class="mx-12 my-4" @click="loading = !loading">
                Toggle
              </v-btn>
            </div>
    
            <v-row justify="center">
              <v-col class="mb-12" cols="12" md="4">
                <v-skeleton-loader 
                                   :loading="loading" 
                                   transition="scale-transition" 
                                   type="table-heading, list-item-two-line, table-tfoot">
                  <v-card>
                    <v-card-title>Title</v-card-title>
                    <v-card-text>Card Text</v-card-text>
                  </v-card>
                </v-skeleton-loader>
              </v-col>
            </v-row>
          </v-container>
        </v-content>
      </v-app>
    </div>

脚本:

// Looking for the v1.5 template?
// https://codepen.io/johnjleider/pen/GVoaNe

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
      loading: true,
  }),
})

来源: https://codepen.io/piiner123/pen/abbBOgO?editors=1010