Не удается отобразить родительский компонент из-за дочерних компонентов? - PullRequest
Новая
       37

Не удается отобразить родительский компонент из-за дочерних компонентов?

0 голосов
/ 05 марта 2020

Персональный компонент 

Vue.component('person-clickable', {
  template: 
        <div class="grid-person very-rounded" :style="isClicked ? { 'background-color': '#ffaa00'} :null" @click="onClick();">
      <img class="person-img very-rounded" :src=person.pictureUrl>
      <div class="person-fullname"><span>{{ person.fullName }}</span></div>
      <div class="person-email"><span class="text-grey-light">{{ person.email }}</span></div>
  </div>,
  props: {
      person: {
          type:Object,
          default(){ return {};}
      },
      isClicked: false,
      callMethod:  { type: Function },
  },
  methods: {
      onClick() {
        this.$emit('person-selected', this.person);
        this.isClicked = !this.isClicked;
    },
  }
});

//Datepicker component access
Vue.component('vue-datetime', window.VueDatetime.Datetime);

//Planmodal component
Vue.component('plan-modal-comp', {
  template:
  <div class="planModal-container modal-container">
    <div class="planModal-header">
        <h3>Plan Course</h3>
    </div>
      <div class="planModal-date-trainers">
        <h6 class="form-label">Date & Time</h6>
        <vue-datetime type="datetime" v-model="datetime" value-zone="UTC"
          zone="Europe/Copenhagen" :minute-step="15"
          placeholder="Choose date..."> 
        </vue-datetime>

        <h6 class="form-label">Select trainer</h6>
        <div v-for="t in course.trainers" :key="t.id">
          <person-clickable @person-selected="handleSelectTrainerEvent"
            :person="t"> </person-clickable>
        </div>
      </div>

      <div class="planModal-finish-buttons">
        <button class="planModal-cancel btn btn-action-negative"
          @click="vm.onCancel()">CANCEL</button>
        <button class="planModal-save btn btn-action" @click="vm.planCourse()">PLAN
          NOW</button>
      </div>  
  </div>,
  props: {   },
})`

Выше представлены мои 3 разных компонента, каждый из которых я тестировал отдельно, что прекрасно работает. Как только я пытаюсь использовать 'plan-modal-comp', который использует два других дочерних компонента, модальное окно не отображается.

Если я удаляю два дочерних компонента из 'plan-modal- comp 'модал отображается правильно, без фактических дочерних компонентов, так как мы только что удалили код для них.

Есть идеи, что для меня не так?

Заранее спасибо!

...