Vue JS: Реквизит на модальном компоненте продолжает показывать typeError - PullRequest
Новая
       16

Vue JS: Реквизит на модальном компоненте продолжает показывать typeError

0 голосов
/ 04 марта 2019

У меня проблемы с данными, которые передаются компоненту.он будет отображаться только как объект, а не как элемент внутри объекта.Я прочитал несколько вопросов / ответов отсюда, но я все еще не мог заставить это работать.

, когда я пытаюсь {{ modalData.projectName }} (в дочернем), это покажет эту ошибку в консоли "Ошибка в рендеринге:"Ошибка типа: _vm.modalData is null ""

вот мои коды: parent 

<template>
   <section id="portFolio">
      <div class="row">
     <div  
        v-for="project in projects" 
        v-bind:key="project.id" 
        class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3"
     >
        <a type="button" data-toggle="modal" data-target="#exampleModal" v-on:click="openModal(project)">
           <div class="project-block">

              <!-- Image -->
              <div class="image-preview">
                 <img src="/dist/img/logo-test.png" class="img-fluid" alt="Twitter">
              </div>

              <!-- Details -->
              <div class="project-details p-t-10 p-b-10 p-l-10 p-r-10">
                 <div class="">
                    <h5 class="text-purple m-b-5">{{ project.projectName }}</h5>
                    <p class="text-dark">{{ project.companyName }}</p>
                 </div>
                 <p class="subtext text-dark">{{ project.projectYear }}</p>
              </div>

           </div>
        </a>

     </div>
      </div>
      <app-modal ref="modal" v-bind:modalData="selectedItem"/>
   </section>
</template>

<script>
// Component
import modalBlock from "./component/portfolio/portfolioModal.vue";

export default{
  name: "portFolio",
  components: {
   'app-modal': modalBlock
  },
   data() {
      return {
     // showModal: false,
     selectedItem: null,
     projectName: '', 
    companyName: '', 
    projectYear: null,
    previewPic: '',
    testText: '',
    modalData: '',
     projects: [
        {
           projectName: 'Project One', 
           companyName: 'CoolCompany Sdn Bhd', 
           projectYear: 2019,
           previewPic: "/dist/img/logo-test.png",
           testText: "First object"
        },
        {
           projectName: 'Project Two', 
           companyName: 'NotSoCompany Sdn Bhd', 
           projectYear: 2018,
           previewPic: "/dist/img/logo-test.png",
           testText: "Second object"
        },
        {
           projectName: 'Project Three', 
           companyName: 'LameCompany Sdn Bhd', 
           projectYear: 2017,
           previewPic: "/dist/img/logo-test.png",
           testText: "Third object"
        }
     ]
  }
    },
  methods: {

openModal(modalData) {
  this.selectedItem = modalData
  let element = this.$refs.modal.$el
  $(element).modal('show')
}

  }
}

</script>

Дочерний компонент: 

<template>
  <div class="modal fade bd-example-modal-xl" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
  <div class="modal-content">

    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel">The title</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <h2>{{ modalData.projectName }}</h2>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default{
   name: "modalBlock",
   props:['modalData'],
   data(){
      return {
      }
   },
   methods: {
  close() {
     this.$emit('close');
  },
  }
 }

</script>

Могу ли я узнать, где я сделал неправильно?или я забыл объявить что-то в коде?

спасибо

...