質問編集履歴

1

追記

2018/05/16 10:31

投稿

kazoogon
kazoogon

スコア281

test CHANGED
File without changes
test CHANGED
@@ -93,3 +93,89 @@
93
93
  ![イメージ説明](33c56faf37a883bcf2bf4ee0a2d19370.png)
94
94
 
95
95
  ここで困っております、よろしくお願いいたします。
96
+
97
+
98
+
99
+ 回答受けての追記
100
+
101
+ ---
102
+
103
+ ```
104
+
105
+ //js側
106
+
107
+ //arr_isReservedで自分が予約した授業の情報をとってくる
108
+
109
+ //→isReserved_timeにその時間idの配列を入れる
110
+
111
+ var arr_isReserved = @json($arr_isReserved);
112
+
113
+ var isReserved_time = [];
114
+
115
+ for(var i=0; i<arr_isReserved.length; i++){
116
+
117
+ isReserved_time.push(arr_isReserved[i].time_id);
118
+
119
+ }
120
+
121
+
122
+
123
+
124
+
125
+ //html側
126
+
127
+ //時間idの配列がtimeInboxに含まれていたら「You already reserved!!」と表示・その他の先生は表示させない
128
+
129
+ <div class="reserved col-md-10 border text-center" v-if="isReserved_time.some(function(v){ return v === timeIndex})">//3行追加
130
+
131
+ You already reserved!!<br>
132
+
133
+ </div>
134
+
135
+
136
+
137
+ <div class="teachers col-md-10 border" v-else>
138
+
139
+ <ul>
140
+
141
+ <li>
142
+
143
+ <div v-for="available_teacher in available_teachers" class="teacher text-center" v-if="available_teacher.time_id == timeIndex">
144
+
145
+ {{--{!! Html::image('images/teachers/'.available_teacher.teacher.teacher_image[0].name.','.profile.','.array('class' => 'thumb img-circle', 'height' => 110, 'width' => 110)) !!}<br>--}}
146
+
147
+ <div class="teacher-img" @click="teacherDetail(available_teacher.teacher.name, available_teacher.teacher.comment)">
148
+
149
+ <img class="thumb img-circle" :src="'/images/teachers/'+ available_teacher.teacher.teacher_images[0].name" alt="profile" width=110 height=110><br>
150
+
151
+ <div class="mask">
152
+
153
+ <div class="detail">Detail</div>
154
+
155
+ </div>
156
+
157
+ </div>
158
+
159
+ @{{available_teacher.teacher.name}}<br>
160
+
161
+ <button type="button" class="btn btn-warning" @click="reserve(available_teacher.teacher_id, available_teacher.time_id, chosen_date)">Reserve</button>
162
+
163
+ </div>
164
+
165
+ </li>
166
+
167
+ </ul>
168
+
169
+ </div>
170
+
171
+ ```
172
+
173
+
174
+
175
+ ここまでできましたが、「You already reserved!!」部分に予約した先生の情報を表示したい
176
+
177
+  →arr_isReservedの情報を使用したいが、htmlに追加した部分にどのように記載すればよいかでつまずく。。
178
+
179
+  
180
+
181
+ ご指摘の通りlaravelで制御した方が簡単かもしれませんが、vue.jsのfor文でまわしたtimeIndexキーをlaravelで比べる必要有+ajaxを使用して日ごとの先生空き情報を表示するので、JS側で処理した方がよいと思われます。