vue.js - テーブル内のネストされた v-for vuejs

Question

私は2セットのデータを持っています。

時間の長さのリスト

 timeDurations: [
   { 'duration': '02:30 AM - 03:00 AM' },
   { 'duration': '03:00 AM - 03:30 AM' },
   { 'duration': '03:30 AM - 04:00 AM' },
   { 'duration': '04:00 AM - 04:30 AM' },
   { 'duration': '04:30 AM - 05:00 AM' },
   { 'duration': '05:00 AM - 05:30 AM' },
   { 'duration': '05:30 AM - 06:00 AM' }
 ];

その特定の期間に割り当てられたバスのリスト

 assignedBus: [
   { 'duration': '03:00 AM - 03:30 AM', 'bus': 'Bus1' },
   { 'duration': '04:00 AM - 04:30 AM', 'bus': 'Bus2' },
   { 'duration': '05:00 AM - 05:30 AM', 'bus': 'Bus3' }
 ];

テーブルを使用して、vue jsを使用してその期間のリストを表示しています

  <table class="table table-striped table-bordered table-hovered">
    <thead>
      <tr>
        <th>Time Duration</th>
        <th>Bus</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="time in timeDurations">
        <td>{{time.duration}}</td>
        <td><button class="btn btn-primary">Assign Bus</button></td>
      </tr>
    </tbody>
  </table>

assignedBusしかし、実際には、データに基づいて期間と対応するボタンを表示したい

表の値は次のようにする必要があります

|     Time Durations     |     Action    |
|   02:30 AM - 03:00 AM  |   Assign Bus  |
|   03:00 AM - 03:30 AM  |    View Bus   |
|   03:30 AM - 04:00 AM  |   Assign Bus  |
|   04:00 AM - 04:30 AM  |    View Bus   |
|   04:30 AM - 05:00 AM  |   Assign Bus  |
|   05:00 AM - 05:30 AM  |    View Bus   |
|   05:30 AM - 06:00 AM  |   Assign Bus  |

したがって、ボタンtimeDurationsに一致するデータがある場合は、そうでなければなりませんassignedBusView BusAssign Bus

ここに私のフィドルがあります-> https://jsfiddle.net/943bx5px/31/

助けてください。ありがとう