引导卡上的LARAVEL + VUE v-for Loop行为异常

Question

大家好，我在循环接收我可以看到的数组时遇到问题 在这里->

它没有在引导程序上跟随我的代码

Vue代码

 <div class="teacher-wrapper">
 <section>
 <h1 class="display-4"> Classes you manage </h1> 
 <hr>
 <div class="row">
     <div class="col-sm-4 ">
         <div data-toggle="modal" data-target="#addclass" class="card 
classes-card text-primary text-center shadow text-primary">
             <div class="card-inner p-5 ">
                  <h4> Add Class </h4>
                  <i id="plus-class" class="fa fa-plus" data-toggle="modal" 
data-target="#addclass" ></i>
             </div>           
         </div>     
     </div>
<div  v-for="teacherclass in teacherclasses" v-bind:key="teacherclass.id">

     <div class="col-sm-4 ">
         <div  class=" text-primary text-center shadow text-primary">
             <div class="card-inner p-5 ">
                  <h4> {{ teacherclass.section }}  </h4>
                  <i id="plus-class" class="fa fa-plus" data-toggle="modal" 
data-target="#addclass" ></i>
             </div>           
        </div>
     </div>

我的代码有问题吗？我希望它的行为像这样->

先谢谢大家！