javascript - Vue js 数据逻辑—

问题描述

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

我将从我的数据库中填充一个数组，其中包含已占用的插槽（下午 5 点的第 5 场，...）；
然后，我将遍历所有可能性（从早上 7 点到下午 12 点，以及每个小时，每个时段），并在预订时输入预订的名称，并在没有预订时输入按钮。

我不知道如何构建我的数据；

在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>

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

标签： javascriptvue.js

您可以创建一个方法，在循环中按法院和小时索引过滤预订。

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>

javascript - Vue js 数据逻辑——预约表

问题描述

解决方案

推荐阅读