Как убедиться, что родительский элемент передает заполненные реквизиты дочернему компоненту в VueJS

Question

Добрый день всем. Представьте, что у нас есть родительский и дочерний компоненты, т.е. PracticePersonLists (parent) -> BCardHeaderWithButton (child). Теперь дочерний элемент состоит из vue-multiselect, например, где leftAction - это объект Object prop

<!-- 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"
/>

. Родитель отображает дочернего элемента следующим образом:

<b-card-header-with-button
  v-if="(isHR && (person.md_current === 1))"
  card-title="Events"
  :left-action="eventsLeftAction"
  :right-action="eventsRightAction"
  @rightActionClick="addEvent()"
/>

eventsLeftAction является Свойство data внутри родительского элемента выглядит следующим образом:

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

eventsFilters создается в created хуке родительского элемента

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

, но проблема в том, что при загрузке страницы дочерний компонент не может найти свой leftAction.options, поэтому он возвращается как неопределенный. Мы думаем, что это связано с тем фактом, что дочерние компоненты отображаются перед родительским, поэтому он ищет данные, которых еще нет ... обычно мы преодолеваем это, устанавливая логическое значение dataLoaded и отображая дочерний элемент только в том случае, если логическое значение истинно, но в этом случае оно не работает

Кто-нибудь знает, как решить эту проблему? Спасибо

Answer 1

это не правда. parent created вызывается до того, как child рендерится проблема в вашем коде:

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

вы не можете установить option:this.eventsFilters использование this здесь недопустимо.

вы должны сделать это так

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

и в хуке created установите значения

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

Answer 2

Единственное решение, которое мы могли бы найти сейчас, - это сохранить опции в Vuex из хука created родительского объекта, а затем вытянуть их с 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 ''
    }
  }
}

Если кто-нибудь знает лучшее решение, мы будем признательны, если вы поделитесь.