Question

任何人都可以提供帮助，我正在尝试在数据加载之前不渲染组件

我的页面中有

async asyncData ({ params, store, isLoading=true}) {
    const thisCaseId = store.dispatch('cases/getCase', params.caseId ); 
      isLoading = false
    return { thisCaseId, isLoading}
  },

控制台日志记录确认我的isLoading确实从True更改为false

我想我可以通过以下道具将其传递给组件

<case-summary  :isLoading='isLoading' :caseId='caseId'></case-summary>

然后在容器上使用v-if

<section class="case-summary-container" v-if="!isLoading">

但是那是行不通的，尽管isLoading值确实按照预期的方式通过prop传递给了子组件并且可以正常工作，只是不等待渲染。

我还尝试在呈现组件之前在page元素上使用相同的元素

 <b-card v-if="isLoading">
            <h2>Loading ...</h2>
        </b-card>

        <b-card v-if="!isLoading">
          <case-summary  :caseId='caseId'></case-summary>
        </b-card>

但这也不起作用。

任何人都可以向我解释一下，我需要做些什么来使它工作，因为在这两种情况下，我仍然会在重新呈现新结果之前在先前记录显示的地方出现闪烁（这就是我要尝试的做法）停止）

我应该添加一个对象，因此不能使用.length，尽管我认为由于以前的内容仍然存在，所以无论如何都无法工作

基本上，我想延迟加载组件，直到新数据填充为止

我在商店中的操作如下

getCase ({ commit, context }, data) {
    return new Promise ((reject) => {
      this.$axios.get('/cases/' + data + '.json')
    .then(res => {
      const obj = {};
        Object.assign(obj, res.data);
        commit('GET_CASE', obj)
      })
      .catch(e => {
        context.error(e)
        reject('/cases/')
        this.loading = false
      })
    })
  },

非常感谢

将isLoading值传递给nuxtjs应用程序中的组件

0 个答案: