javascript - Vue 2.0 : Passing asynchronous data to child component

Question

我有一个父 Vue 组件，它通过 prop 将数据传递给它的子组件，但数据是异步可用的，因此我的子组件初始化为未定义的值。

在数据可用之前，我该怎么做才能阻止初始化？

父级:

  var employees = new Vue({
    el: '#employees',
    data: { ... },
    methods: {
      fetch: function(model, args=null) {

      let url = "/" + model + ".json"
      console.log(url);
      $.ajax({
        url: url,
        success: ((res) => {
          console.log(res)
          this[model] = res;
          this.isLoading = false;
        error: (() =>  {
          this.isLoading = false;
        }),
        complete: (() => {
          // $('.loading').hide();
          this.isLoading = false;
        })
      })

    },
    mounted: function() {
      this.fetch(...)
      this.fetch(...)
      this.fetch('appointments')
    }
  })

我的 fetch 方法被调用了多次。

Answer 1

你可以在父模板中使用v-if:

<template v-if="everthingIsReady">
    <child-item :data="data"></child-item>
</template>

在 everythingIsReady 设置为 true 之前，不会创建子项，您可以在所有调用完成后立即设置它。