概要
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側で処理した方がよいと思われます。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/23 08:32
2018/05/23 08:43
2018/05/23 09:30
2018/05/26 12:47 編集