javascript - 如何让vue中的元素只有准备好后才渲染？

Question

当我向 api 发送请求并将结果呈现为列表时，某些图像显示较晚，而文本先呈现。有什么办法可以防止这种情况发生吗？
我只想当图像、类、文本完全通过逻辑计算完成时才显示列表。如果他们还没有准备好，我仍然想把他们藏起来。 v-cloak 不起作用!

这是我遇到麻烦的部分。

您可以看到，整个列表也已渲染，还剩下一些图像。

这是我的代码示例。

    <div id="app">
    <h2>Todos:</h2>
    <ol>
        <li v-for="todo in todos">
            <!-- thre may be some more logics -->
            <img :src="todo.img" width="100px">
            {{todo.name}}
        </li>
    </ol>
</div>

new Vue({
    el: "#app",
    data: {
        todos: []
    },
    created: function(){
        this.requestApi();
    },
    methods: {
        requestApi(){
        this.todos = [
                { img: "https://steamcdn-a.akamaihd.net/apps/dota2/images/mars/hero_mars93fd33s5.jpg", name: "AAA" },
                { img: "https://steamcdn-a.akamaihd.net/apps/dota2/images/mars/hero_mars93fd33s5.jpg", name: "BBB" },
                { img: "https://steamcdn-a.akamaihd.net/apps/dota2/images/mars/hero_mars93fd33s5.jpg", name: "CCC" },
                { img: "https://steamcdn-a.akamaihd.net/apps/dota2/images/mars/hero_mars93fd33s5.jpg", name: "DDD" }
            ];
        }
    }
})

https://jsfiddle.net/vxy4gnj8/3/

上面的 jsfiddle 没有清楚地显示我的问题，因为它没有发送到真正的 api 并且渲染得太快。

Answer 1

您可以使用v-if仅在requestApi完成时显示组件:

<div id="app">
  <div v-if="!isLoading">
    <h2>Todos:</h2>
    <ol>
        <li v-for="todo in todos">
            <!-- thre may be some more logics -->
            <img :src="todo.img" width="100px">
            {{todo.name}}
        </li>
    </ol>
  </div>

</div>

new Vue({
  el: "#app",
  data: {
      todos: [],
      isLoading: true
  },
  created: function(){
      this.requestApi();
  },
  methods: {
      requestApi(){
        this.todos = [
          { img: "https://steamcdn-a.akamaihd.net/apps/dota2/images/mars/hero_mars93fd33s5.jpg", name: "AAA" },
          { img: "https://steamcdn-a.akamaihd.net/apps/dota2/images/mars/hero_mars93fd33s5.jpg", name: "BBB" },
          { img: "https://steamcdn-a.akamaihd.net/apps/dota2/images/mars/hero_mars93fd33s5.jpg", name: "CCC" },
          { img: "https://steamcdn-a.akamaihd.net/apps/dota2/images/mars/hero_mars93fd33s5.jpg", name: "DDD" }
        ];
        this.isLoading = false
      }
  }
})

请注意，isLoading 用作标志来检查请求是否完成。