v-for外の要素を表示・非表示制御したい(laravel5.5 vue.js)

Question

概要

laravel5.5 vue.jsを使用し学校システムを構築しております。
画像はある日の、ある時間の授業可能な先生一覧
→reserveボタン押せば予約できる

<li v-for="(row,timeIndex) in rows">
    <div class="time col-md-2 border">
        @{{row.time}} //画像左の時間表示(17:00~18:00など)
    </div>
    <div class="teachers col-md-10 border">
        <ul>
            <li v-for="available_teacher in available_teachers" v-if="available_teacher.user_id == null">//available_teacher.user_idに自分のIDが入っている = その時間はもう予約できないようにする
                <div class="teacher text-center" v-if="available_teacher.time_id == timeIndex">
                    <img class="thumb img-circle" (画像部分省略)><br>
                    @{{available_teacher.teacher.name}}<br>
                    <button type="button" (ボタン部分省略)>Reserve</button>
                </div>
            </li>
        </ul>
    </div>
</li>

実現したいこと

例えば画像の18:00~19:00のどれか先生を予約
→その時間同じ生徒が二人先生を予約するをを防ぐために、「予約済み」などの表記

問題点

<li v-for="available_teacher in available_teachers" v-if="available_teacher.user_id == null">
	<div>
		省略
	</div>
</li>
<li v-else>
	予約済み
</li>

このようにavailable_teachersの情報にuser_idが入っていたら(=自分がすでに予約していたら)、「予約済み」を表示したい
→この書き方だとまだ他の先生の情報が画像のように残ってします
→クラス名teachersのdiv要素を表示・非表示制御したいが、available_teachersをv-forでまわしている外なのでできない。。。

ここで困っております、よろしくお願いいたします。

回答受けての追記

//js側
//arr_isReservedで自分が予約した授業の情報をとってくる
//→isReserved_timeにその時間idの配列を入れる
var arr_isReserved = @json($arr_isReserved);
var isReserved_time = [];
for(var i=0; i<arr_isReserved.length; i++){
    isReserved_time.push(arr_isReserved[i].time_id);
}


//html側
//時間idの配列がtimeInboxに含まれていたら「You already reserved!!」と表示・その他の先生は表示させない
<div class="reserved col-md-10 border text-center" v-if="isReserved_time.some(function(v){ return v === timeIndex})">//3行追加
    You already reserved!!<br>
</div>

<div class="teachers col-md-10 border" v-else>
    <ul>
        <li>
            <div v-for="available_teacher in available_teachers" class="teacher text-center" v-if="available_teacher.time_id == timeIndex">
                {{--{!! Html::image('images/teachers/'.available_teacher.teacher.teacher_image[0].name.','.profile.','.array('class' => 'thumb img-circle', 'height' => 110, 'width' => 110)) !!}<br>--}}
                <div class="teacher-img" @click="teacherDetail(available_teacher.teacher.name, available_teacher.teacher.comment)">
                    <img class="thumb img-circle" :src="'/images/teachers/'+ available_teacher.teacher.teacher_images[0].name" alt="profile" width=110 height=110><br>
                    <div class="mask">
                        <div class="detail">Detail</div>
                    </div>
                </div>
                @{{available_teacher.teacher.name}}<br>
                <button type="button" class="btn btn-warning" @click="reserve(available_teacher.teacher_id, available_teacher.time_id, chosen_date)">Reserve</button>
            </div>
        </li>
    </ul>
</div>

ここまでできましたが、「You already reserved!!」部分に予約した先生の情報を表示したい
→arr_isReservedの情報を使用したいが、htmlに追加した部分にどのように記載すればよいかでつまずく。。

ご指摘の通りlaravelで制御した方が簡単かもしれませんが、vue.jsのfor文でまわしたtimeIndexキーをlaravelで比べる必要有＋ajaxを使用して日ごとの先生空き情報を表示するので、JS側で処理した方がよいと思われます。

Answer 1

なんだか難しい解決策へ走ってるように見えました。
質問を読んだ感じでは、内側のループを整理するだけで実現可能だと思います。

内側のループで扱う条件を整理すると、

1. 時間割にマッチする先生を表示する
2. 1が満たされる場合

2-a. 未予約なら予約できるように表示する
2-b. 予約済みなら予約済みと表示する

ですよね。
v-ifを入れ子にすれば上手く行く事が明白かと思います。
知っているかもしれませんが、2-a,2-bの分岐はv-ifとv-elseを使えば書けます。

<div v-if="isSomethingSatisfied">
</div>
<div v-else>
</div>

ここまで知識が揃えば、あとはちょっとコードを書き直すだけです。
※ 予約済みのマークアップは省略してます。

<li v-for="available_teacher in available_teachers">
  <template v-if="available_teacher.time_id == timeIndex"> <!-- 1 -->
    <!-- available_teacher.user_idに自分のIDが入っている = その時間はもう予約できないようにする -->
    <div class="teacher-center" v-if="available_teacher.user_id == null"> <!-- 2-a -->
      <!-- 予約可能 -->
      <img class="thumb img-circle" (画像部分省略)><br>
      @{{available_teacher.teacher.name}}<br>
      <button type="button" (ボタン部分省略)>Reserve</button>
    </div>
    <div class="teacher text-center" v-else> <!-- 2-b -->
      <!-- 予約済み -->
    </div>
  </template>
</li>

どうでしょうか？

Comments

[kazoogon]

回答ありがとうございます。
これだと同じ時間帯に複数の先生を予約できてしまわないでしょうか？？勘違いでしたら申し訳ないです、よろしくお願い致します。

[ShodaiYokoyama]

ごめんなさい。出来てしましいますね。

[ShodaiYokoyama]

最初の回答者さんも書いてますが、やはり予約ができるかどうかは時間帯を見ないと行けないのに、先生で判定しようとしてる所に無理があります。
ただし、予約してる先生も表示したいとの事なので、予約した時間帯と先生の情報を持った配列も欲しいです。
arr_isReservedに先生の情報が入ってるのがベストなのですが、入ってないのなら取り敢えず下記のようにすればいけるかと思います。

※my_user_idは自分のIDになります。

<div class="reserved col-md-10 border text-center" v-if="isReserved_time.some(function(v){ return v === timeIndex})">
　 <div v-for="available_teacher in available_teachers.filter(_ => _.time_id === timeIndex && _.user_id === my_user_id)">
You already reserved!! {{ available_teacher.teacher.name }} <br>
</div>
</div>

[kazoogon]

(現在のとってくるtableのカラム構造が)
・dateカラムには、日付の情報のみ(例、2018-05-27)
・時間はtime_idカラムに1~9の数字が入り、timeテーブルに時間(例,20:00~21:00)があるので、そこと結合している。

となっています。ここのdateに時間までの情報を入れるように実装し直すのがbestな方法かなと思っております。。汗

Answer 2

ループの中でイベントを発生させて親要素を非表示にするという方法が思いつきますが、後で読んでわからないコードになると思います。

素直に考えて、rowsを作るときにrow.userReserved みたいな要素を設けましょう。DB操作したほうが作り安いと思うので、javascriptで作るよりlaravel側で作って・・・

というより、もうrow.avairable_teatures、のような時間帯ごとの先生まで作ってしまったほうがループも減りコードもすっきりします。

Comments

[kazoogon]

回答ありがとうございます。
遅れて申し訳ございませんが、本文の「回答を受けての追記」に追記させていただきました。
よろしくお願いいたします。

[kazoogon]

ご指摘の通りrowsの中に「teachers(授業可能な先生), reserved_teacher(自分が予約した先生)」を追加いたしました。
foreach($rows as &$row){
foreach($available_teachers as $available_teacher){
if($row["time_id"] == $available_teacher["time_id"]){
array_push($row['teachers'], $available_teacher);
if($available_teacher["user_id"] != NULL){
$row["reserved_teacher"] = $available_teacher;
}
}
}
}
このようなforeachを繰り返すAPIができたので、時間をかけないためにも他の単純な方法があれば幸いですが、ひとまずこの実装でいこうと思います