javascript - 将组件 vue js 渲染到导航选项卡中

Question

我有渲染组件（课程）的问题，当我想单击以防万一“本科”但组件在最后一个选项卡面板中呈现...请帮助我！，知道如何解决这个问题吗？谢谢。

在图像中仅在最后一个导航选项卡中呈现问题 在此处输入图像描述

这是我的代码

html

<div id="ofert" class="row py-4">
    <div class="col-md-4 mb-2">
        <div class="row">            
            <div class="col-xs-12 col-md-12 p-0">
                <ul class="nav nav-tabs flex-column nav-ga-pills" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" @@click.prevent="navClick" data-graduation="Undergraduate" id="home-tab" data-toggle="tab" href="#undergraduate" role="tab" aria-controls="home" aria-selected="true">undergraduate</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" @@click.prevent="navClick" data-graduation="Postgraduate" id="profile-tab" data-toggle="tab" href="#postgraduate" role="tab" aria-controls="profile" aria-selected="false">oosgraduate</a>
                    </li>                    
                </ul>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="undergraduate" role="tabpanel" aria-labelledby="home-tab">
                <courses ref="courses" :static=`image`></courses>          
                
            </div >
            <div class="tab-pane fade" id="postgraduate" role="tabpanel" aria-labelledby="profile-tab">
                <courses ref="courses" :static=`image`></courses>                
                
            </div>            
        </div>
    </div>
</div>

父母

import courses from '../components/microspecial/ofert.vue'



new Vue({
    el: '#ofert',
    components: { courses },
    data() {
        return {
            graduationlevel: ''
        }
    },
    methods: {
        navClick(e) {
            this.graduationlevel = e.currentTarget.dataset.graduation;
            this.$refs.courses.showData(this.graduationlevel);
        }
    }
});

孩子

<template>    
   <div class="row bg-light">
       <div v-for="item in courses" class="col-sm-12 col-md-6 p-4 border-bottom">
           <div class="row ga-i-box-oferta">
               <div class="col-md-12 mb-2 ga-tittle-oferta">
                   <h2>{{item.Name}}</h2>
               </div>
               <div class="d-none d-lg-block col-md-5">
                   <div><img class="border" :src="url +`/repository/microspecial/courses/` + item.Id + `.png`" alt="" width="130" /></div>
               </div>
               <div class="col-xs-12 col-lg-7 ga-i-box-oferta-info">
                   <i class="fas fa-barcode"></i><span>Snies: {{item.Snies}}</span><br>
                   <i class="fas fa-chalkboard-teacher"></i><span>{{item.MethodologyName}}</span><br />
                   <i class="fas fa-user-graduate"></i><span>{{item.Title}} </span>
                   <div class="ga-i-box-btn">
                       <a href="" id="getMoreInformation" role="button" data-id="item.Id" data-toggle="modal" data-target="#modalOferta">Más información <i class="fas fa-arrow-circle-right"></i></a>
                   </div>
               </div>
           </div>
       </div>
    </div>
</template>
<script>
   export default {
       props: ['static'],
       data() {
           return {
               courses: [],
               url: this.static
           }
       },        
       methods: {
           showData(graduationLevel) {
               this.courses = [];
               fetch(`/MicroSpecial/GetCourses?graduationLevel=${graduationLevel}`)
                   .then(respon => respon.json())
                   .then(response => {
                       this.courses = response;
                   })
                   .catch(response => {
                   })
              
           }
       }
   }
</script>

标签： javascriptvue.jsbootstrap-4