如何在初始化Vue组件之前添加引导消息？

Question

我有一个Rails应用程序。在主层中，我在#app中包含控制器的HTML代码：

body
  #app
    = yield

HTML（Slim）Rails应用程序代码中的Vue组件我描述如下：

news-list limit="24"
news-show news-id="528"

项目中的Vue全局初始化如下：

document.addEventListener('DOMContentLoaded', (event) => {
  if (document.getElementById('app')) {
    new Vue({
     el: '#app',
     // ...
})

问题是在Vue完成渲染之前有时会出现延迟。

也就是说，它看起来像这样：

1. 转到Rails应用程序页面。我们看到一个空页面。
2. 渲染Vue组件。仍然没有新闻列表。一般信息。
3. API请求发生。呈现新闻列表。完成。

我想在Rails应用程序的一侧做1到2点，类似于微调器。

也就是说，我转到Rails应用程序页面。只要有Vue组件，我就会看到一个微调器。一旦组件完成渲染，微调器就会消失。

但我不知道怎么做......

我希望得到你的帮助。抱歉我的英语。

Answer 1

在初始化vue组件之前显示微调器可以通过在初始化vue的元素内渲染微调器来完成。

<div id="app">
   <!-- This content will be replaced, once the Vue component is rendered -->
</div>

加载组件后的微调器可以使用v-if完成

<template>
  <div>
    <spinner v-if='!news' />
    <list-of-news v-else :news='news' />
  </div>
</template>