在 table 中嵌套 v-for vuejs

Question

我有两组数据。

持续时间列表

 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' }
 ];

我正在使用 table 来显示使用 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数据

显示持续时间和相应的按钮

table中的值必须像这样

|     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 在 assignedBus 中有匹配数据，按钮必须是 View Bus 否则 Assign Bus

这是我的 fiddle -> https://jsfiddle.net/943bx5px/31/

请帮忙。谢谢

Answer 1

您可以稍微简化您的数据结构。我建议你这个方法：

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

然后你的标记也可以被简化：

<template v-for="time in timeDurations">
  <tr>
    <td>{{time}}</td>
    <td>
      <button class="btn btn-primary">
        {{ assignedBus[time]  ? "View Bus" : "Assign Bus" }}
      </button>
    </td>
  </tr>
</template>

如果你想使用你的格式，使用这个：

methods: {
  checkBus(duration) {
    return this.assignedBus.find(function(info) {
        return info.duration === duration
      });
    }
 }

和模板：

<template v-for="time in timeDurations">
  <tr v-if="hasAssignedBus(time.duration)">
    <td>{{time.duration}}</td>
    <td><button class="btn btn-primary">
      View Bus
      </button></td>
  </tr>
  <tr v-else>
     <td>{{time.duration}}</td>
     <td><button class="btn btn-primary">
       Assign Bus
      </button></td>
  </tr>
</template>

Answer 2

问题是for循环中的for循环引起的。检查我的 solution:

hasAssignedBus(duration) {
  for (var i = 0; i < this.assignedBus.length; i++) {
      if(this.assignedBus[i].duration == duration) {
        return true;
      }
  }
  return false;
}

干杯

在 table 中嵌套 v-for vuejs

nested v-for vuejs in a table

vue.js

v-for