Vue.js表格v-for开发：根据巴士分配数据切换按钮显示状态

我来帮你搞定这个需求！你只需要添加一个简单的判断逻辑，就能根据assignedBus的数据动态显示不同的按钮文本，具体实现步骤如下：

1. 添加判断方法到Vue实例 #

在你的Vue实例中，新增一个方法用来检查当前时间段是否已经分配了巴士：

new Vue({
  el: '#app',
  data: {
    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' }
    ]
  },
  methods: {
    isBusAssigned(duration) {
      // 查找当前时间段是否在已分配列表中，找到匹配项就停止遍历
      return this.assignedBus.some(item => item.duration === duration);
    }
  }
});

2. 修改模板中的按钮逻辑 #

把表格里的按钮部分改成根据判断结果动态显示文本，同时给v-for添加:key属性（Vue列表渲染的最佳实践）：

<table class="table table-striped table-bordered table-hovered">
  <thead>
    <tr>
      <th>Time Duration</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="time in timeDurations" :key="time.duration">
      <td>{{time.duration}}</td>
      <td>
        <button class="btn btn-primary">
          {{ isBusAssigned(time.duration) ? 'View Bus' : 'Assign Bus' }}
        </button>
      </td>
    </tr>
  </tbody>
</table>

额外优化（可选） #

如果后续assignedBus数据量较大，你可以把它转换成以时间段为键的对象，让查找速度更快（时间复杂度从O(n)降到O(1)）：

new Vue({
  el: '#app',
  data() {
    const assignedBusList = [
      { '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' }
    ];
    return {
      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' }
      ],
      // 转换为键值对形式的映射
      assignedBusMap: Object.fromEntries(assignedBusList.map(item => [item.duration, item.bus]))
    };
  },
  methods: {
    isBusAssigned(duration) {
      // 直接通过键查找是否存在
      return !!this.assignedBusMap[duration];
    }
  }
});

内容的提问来源于stack exchange，提问作者Codeblooded Saiyan