Question

我需要制作一张预订表（hours是y，slots（实际上是网球场）是x）。

我将使用已经占用的数据库填充数据库中的数组广告位（5PM的5号法院，...）;
然后，我将遍历所有可能性（从7AM到12PM，对于每小时，每个时段）并在预订时注明预订的名称，以及放一个不放的按钮。

我不知道如何构造数据；

在 Php 中，我有一个类似$bookings[$hour][$court]的数组，当不为空时，该数组应包含预订名称（在php嵌套循环中（小时和法院）），我检查了$bookings[$hour][$court]是否为空（然后显示内容（如果有的话，否则显示按钮））。

我希望我足够清楚...

谢谢大家！

编辑：

我尝试过这种方式：

new Vue({
  el: '#app',
  data: {
     bookings: [
      { 
        hour: '1',
        court: '3',
        name: 'Laurent'
       },
      { 
        hour: '2',
        court: '2',
        name: 'Gaspard'
       }
    ]

  }
})

还有

<script src="https://unpkg.com/vue"></script>

<div id="app">
<table>
<tr v-for="hour in (7, 24)" :key="hour">
  <td v-for="court in (1,6)" :key="court">
    <div v-if="">

    </div>
  </td>
</tr>
</table>
</div>

但是我不知道如何将数据链接到模板...

Answer 1

您可以创建一种方法，该方法通过循环中的法院和小时数来过滤预订。

methods: {
    getBookings( hour, court ) {
        return this.bookings.filter( booking => booking.hour == hour && booking.court == court );
    },
},

这将返回一个约会数组，因此我将使用v-for而不是v-if。这意味着js中的代码更少，您没有特殊的代码来处理返回数组为空的情况，并且如果您有两次预订，您的代码将显示出来。

<div v-for="booking in getBookings( hour, court )" >
    {{ booking.name }}
</div>

Vue JS数据逻辑-预订表

1 个答案: