Javascript 如何确保父级将填充的道具传递给VueJS中的子组件

大家好。假设我们有一个父组件和一个子组件，即

PracticePersonLists

（父）->

BCardHeaderWithButton

（子）。现在，子对象由一个

vue multiselect

组成，就像

leftAction

是一个对象属性一样

<!-- Multiselect -->
<multiselect
  v-if="leftAction.type === 'options'"
  v-model="leftAction.model"
  :options="leftAction.options"
  :placeholder="leftAction.placeholder"
  :searchable="true"
  :show-labels="true"
  :allow-empty="false"
/>

events过滤器

在父级的

created

钩子中生成

this.events过滤器=等待构建非后端过滤器选项（this.events，'eventHead'，'eventGroup'）

但问题是，在页面加载时，子组件找不到其

leftAction.options

，因此返回为未定义。我们认为这与子组件在父组件之前渲染这一事实有关，因此它正在寻找尚不存在的数据。。。。通常，我们通过设置一个

dataLoaded

Boolean来克服这一问题，并且仅当Boolean为true但在这种情况下似乎不起作用时才渲染子对象

---

有人知道如何克服这个问题吗？谢谢

现在我们能想到的唯一解决方案是将父对象的

创建的
钩子中的选项存储在Vuex中，然后在子对象中使用
mapState
拖动它们

家长：

this.eventsFilters = await buildNonBackEndFilterOptions(this.events, 'eventHead', 'eventGroup')
this.setPracticePersonListsEventsFilters(this.eventsFilters)

methods: {
    ...mapMutations('practice', ['setPracticePersonListsEventsFilters']),
}

儿童：

<multiselect
  v-if="leftAction.type === 'options'"
  v-model="leftAction.model"
  :options="compOptions"
  :placeholder="leftAction.placeholder"
  :searchable="true"
  :show-labels="true"
  :allow-empty="false"
/>

computed: {
  ...mapState('practice', ['practicePersonListsEventsOptions']),
  compOptions () {
    switch (this.$route.name) {
      case 'app.practice.person.lists':
        return this.practicePersonListsEventsOptions
      default:
        return ''
    }
  }
}


计算：{
…映射状态（'practice'，['practicePersonListsEventsOptions'），
成分（）{
交换机（此.$route.name）{
案例“应用程序实践人员列表”：
返回此。practicePersonListsEventsOptions
违约：
返回“”
}
}
}

如果有人知道更好的解决方案，我们将非常感谢您的分享。
目前我们唯一能想到的解决方案是将父对象的
创建的
钩子中的选项存储在Vuex中，然后在子对象中使用
mapState
将它们拉出来

家长：

this.eventsFilters = await buildNonBackEndFilterOptions(this.events, 'eventHead', 'eventGroup')
this.setPracticePersonListsEventsFilters(this.eventsFilters)

methods: {
    ...mapMutations('practice', ['setPracticePersonListsEventsFilters']),
}

儿童：

<multiselect
  v-if="leftAction.type === 'options'"
  v-model="leftAction.model"
  :options="compOptions"
  :placeholder="leftAction.placeholder"
  :searchable="true"
  :show-labels="true"
  :allow-empty="false"
/>

computed: {
  ...mapState('practice', ['practicePersonListsEventsOptions']),
  compOptions () {
    switch (this.$route.name) {
      case 'app.practice.person.lists':
        return this.practicePersonListsEventsOptions
      default:
        return ''
    }
  }
}


计算：{
…映射状态（'practice'，['practicePersonListsEventsOptions'），
成分（）{
交换机（此.$route.name）{
案例“应用程序实践人员列表”：
返回此。practicePersonListsEventsOptions
违约：
返回“”
}
}
}

如果有人知道更好的解决方案，请与我们分享。
这不是事实。父级
已创建
在呈现子级之前调用。
代码中的问题是

eventsLeftAction: {
  show: true,
  type: 'options',
  options: this.eventsFilters,
  model: this.compEventsLeftActionModel,
  placeholder: 'Select Event'
}

无法设置
选项：this.events过滤器
此处使用
此
完全无效

你应该这样做

eventsLeftAction: {
  show: true,
  type: 'options',
  options: null,
  model: null,
  placeholder: 'Select Event'
}

并在
创建的
钩子中设置值

async created(){
    //you can here whatever you want. its called before child rendered
    this.eventsLeftAction.options= await buildNonBackEndFilterOptions(this.events, 
        'eventHead', 'eventGroup')
}

事实并非如此。父级
已创建
在呈现子级之前调用。
代码中的问题是

eventsLeftAction: {
  show: true,
  type: 'options',
  options: this.eventsFilters,
  model: this.compEventsLeftActionModel,
  placeholder: 'Select Event'
}

无法设置
选项：this.events过滤器
此处使用
此
完全无效

你应该这样做

eventsLeftAction: {
  show: true,
  type: 'options',
  options: null,
  model: null,
  placeholder: 'Select Event'
}

并在
创建的
钩子中设置值

async created(){
    //you can here whatever you want. its called before child rendered
    this.eventsLeftAction.options= await buildNonBackEndFilterOptions(this.events, 
        'eventHead', 'eventGroup')
}

这就像薄荷糖！你真是个大人物，谢谢你！这就像薄荷糖！你真是个大人物，谢谢你！