vue.js tableのマスごとに「1,1」「1,2」「1,3」とデータを持たすには？

Question

Laravel5.5, Vue.jsを利用し学校の予約システムを作成中です。
只今先生がいつ空き時間があるのかをカレンダーでクリックして、色が変わりDBに情報が入るまでを作成しております。

このようなデータを入れることはできるのですが、

このように２つのデータを持たせることが意外とできなくて困っております。

下記に記載しました@foreach ($master_reservation_times as $master_reservation_time)で回ってきた2週目でvueで持たしているデータに+1するなどのアイデアがありますが、うまくいっておりません。

//tbody部分
<tobody>
    @foreach ($master_reservation_times as $master_reservation_time)
        <tr>
            <th scope="row">{{ $master_reservation_time->time }}</th>
            <td scope="row" class="hoge" v-for='item in items' v-bind:class='{active:isActive}' v-on:click='isActive=!isActive'>@{{item.date}}</td>
        </tr>
    @endforeach
</tobody>

//js部分(messageは分かりやすいようにhtml側で今は表示させないようにしてあります)
const demo = new Vue({
    el: '#demo',
    data: {
        isActive: false,
        items: [
            {date: '1', message: 'No' },
            {date: '2', message: 'No' },
            {date: '3', message: 'No' },
            {date: '4', message: 'No' },
            {date: '5', message: 'No' },
            {date: '6', message: 'No' },
            {date: '7', message: 'No' }
        ]
    }
});

お忙しいところ恐縮ですが、よろしくお願いいたします。また「こうやるともっと簡単に作れる」などのご意見ございましたら聞いてみたい限りです。

Comments

[euledge]

@foreachで書かれているものは、どのフレームワークのものでしょうか? ループの外側、内側でvueとそれ以外になっていますが、vueだけにできないのでしょうか?

[kazoogon]

回答ありがとうございます。　@foreachはlaravel5.5のものです。　現在の日付をとってきて1日ずつ足したものをforeachで回しています、これをvue.jsで日付をとってきたら行けると思います。　予約システムなので最終的にDBに日付と時間が入るのであれば問題はありません

[kazoogon]

<thead>部分はphpから日付とってきて表示して <tbody>ではvue.jsのみ使って一マスずつにそれぞれ「1,1」「1,2」「1,3」とデータを持たすことにしました。ご回答ありがとうございました。

Answer 1

<tbody>ではvue.jsのみ使って一マスずつにそれぞれ「1,1」「1,2」「1,3」とデータを持たす