0

对于一个表单，我们有 2 个组件父组件（用于调用 asyncdata 并将数据作为道具传递给子组件）和子组件（表单）。如果我使用链接导航，我可以正确获取子项中的道具。但是如果我尝试刷新子组件页面，它会抛出错误，因为没有传递任何道具。发现原因是在子渲染发送道具数据之前父异步数据未完成。

父组件

<template>
  <div>
    <p>EDIT</p>
    <NewListingModal :is-edit="true" :form-props="this.form" />
  </div>
</template>
<script>
  import NewListingModal from '@/components/NewListingModal.vue'

  export default {
    components: { NewListingModal },
    async asyncData({ params, store }) {
      const listing = await store.$db().model('listings').find(params.listing)  //vuexorm call
      if (typeof listing !== 'undefined') {
        const convertedListing = JSON.parse(JSON.stringify(listing))
        return {
          name: '',
          scrollable: true,
          form: {names: convertedListing.names}
        }
      }
    },
  }
</script>

子组件（删除其他表单数据以使其易于理解）

<template>
  <div v-for="name in this.form.names" :key="name">
    <p>{{ name }} <a @click.prevent="deleteName(name)">Delete<a /></a></p>
  </div>
</template>



<script>
  import Listing from '@/models/listing'


  export default {
    name: 'ListingModal',
    props: {isEdit: {type: Boolean, default: false}, formProps: {type: Object}},
    data() {
      return {
        name: '',
        scrollable: true,
        form: {names: this.formProps.names}
      }
    },
    methods: {
      addName() {
        this.form.names.push(this.name)
        this.name = ''
      },
      deleteName(name) {
        const names = this.form.names
        names.splice(names.indexOf(name), 1)
      }
    }

  }
</script>

如何让NewListingModal组件渲染等到父级中的 asyncData 完成？

4

1 回答 1

0

就我而言，我asyncData在我的父 nuxt 组件中使用，它通过存储dispatch操作获取数据，然后通过突变将其设置为某个存储状态键。

然后我validate在我的子组件中使用了方法。由于 Nuxtvalidate可以返回 Promise，因此我首先检查了 vuex 存储以获取获取的数据。如果没有，我重新获取它并返回承诺。

在父组件.vue

export default {
  async asyncData({ params, store }) {
       // Api operation which may take sometime
       const {data} = await store.dispatch('fetch-my-data')
       store.commit('setData', data) //This should be within above dispatch, but here for relevance 
  }
}

在这里，我只是获取并保存到 vuex 商店。

子组件.vue

export default {
   async validate({ params, store }) {
      let somedata = store.state.data //This is what you've set via parent's component mutation
      return !!somedata || store.dispatch('fetch-my-data')
   }
}

在这里，我要么返回 vuex 存储数据（如果存在），要么重新获取它。

于 2020-04-11T20:59:34.567 回答