Question

如何在显示的每个主题上显示不同的模态数据？我的问题：在显示的每个主题上显示相同的模态数据。

我的刀片视图

@section('content')
<!-- Main content -->
<section class="content" style="background-color:#fff; padding-bottom:50px;" id="subjects">

 <div class="subjects-content">
   <h3>List of Subjects</h3>
   <div class="box-body box-self-evaluation" v-show="subjects.length > 0">
    <table id="example2" class="table table-hover table-striped sortable">
      <thead>
        <tr>
          <th>Subject Area</th>
          <th>Course Title</th>
          <th>Failed</th>
          <th>View more</th>
   </tr>
</thead>
@foreach ($all_subjects as $subject)
<tbody>
    <tr>
      <td>
        <span> {{ $subject->subject_code }}</span>
 </td>
 <td>
        <span> {{ $subject->description }} </span>
 </td>
 <td>
        <span> {{ $subject->grade()->where('grade','F')->count() }}  </span>
 </td>
 <td><span> <div class="btn btn-crimson btn-inline-block" data-toggle="modal" data-target="#myModal"><a href="#" class="btn-view-more">View more info</a></div> </span></td>
</tr>       
</tbody>

@endforeach
</table>             
</div>
<div class="confirmation-buttons-self-evaluation">
    <div class="btn btn-blueviolet btn-inline-block btn-create">Go to Self-Evaluation Page</div>
</div>             

@foreach ($all_subjects as $subject)
<!--MODAL -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <!-- MODAL content -->
      <div class="modal-content" style="width:70%; margin:0 auto; margin-top:100px; max-height: calc(100vh - 210px); overflow-y: auto;">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title">Subject: {{ $subject->subject_code }}</h4>
   </div>

   <div class="modal-body" style="padding-top:0">
          <center>
            <table class="table">      
              <thead>
                <th colspan="3" style="text-align:center">List of Disgraceful Students</th>
         </thead>


         <thead class="failed-header">
                <th>Section: <span style="color:#000"> CS <!-- SECTION --> </span></th>
                <th>Professor: <span style="color:#000"> John Doe <!-- PROF --> </span></th>
                <th>Failed: <span style="color:#000"> 2 <!-- NUMBER OF FAILED SA SECTION --> </span></th>
         </thead>
         <tbody>
                <tr>
                  <td><img src="{{ asset('dist/img/default.png')}}" class="img-square" alt="User Image" style="height:50px; width:50px"></td>
                  <td style="padding-top: 20px" colspan="2"> John Jashuel  </td>
           </tr>
           <tr>
                  <td><img src="{{ asset('dist/img/default.png')}}" class="img-square" alt="User Image" style="height:50px; width:50px"></td>
                  <td style="padding-top: 20px" colspan="2"> John Caezar  </td>
           </tr>                                
    </tbody>
</center>
</table>
</div>

<div class="modal-footer">
   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<!-- /. modal content-->
@endforeach
</section>

@endsection

我的代码出了什么问题？我该如何解决这个问题？请帮帮我... 任何建议或意见都非常感谢谢谢！

Answer 1

尝试改变

 data-target="#myModal"

到

data-target="#{{$subject->id}}"

和＆lt; - modal - ＆gt;中的ID 来自

 id="myModal"

到

id="{{$subject->id}}"

如何在显示的每个主题上显示不同的模态数据？

1 个答案: