Laravel5.5 vue.jsにてonline学校のシステムを作成しております。
画像は生徒側画面、いつどの時間にどの先生の授業が受講可能か見れます。
(デフォルトでは本日(4/18)の情報が見れます)
実現したいこと
例えば「19」をclick
→ajaxにてPHP側で19日に授業可能な先生の情報をとってくる
→画面が非同期で切り替わる
現状
「ajaxの返り値を正確にもらっているが、画面が切り替わらない」
詳細はコード内に記載いたしました。
const schedule = new Vue({
el: '#schedule',
data: {
rows : rows,
available_teachers : available_teachers
},
methods: {
change_date:function(date_id){
const data = { date_id : date_id};
this.$http.post('/ajax/reservation_calender/change_date', data)
.then(function(res){
// 成功したとき
console.log(res.data.available_teachers);//logの結果は下記添付
//**ここでres.data.available_teachersを受け取り反映させるのはどうすれば??
alert("成功");//テストのため
}).catch(function(error){
// 失敗したとき
alert('送信が失敗しました。');//テストのため }); } }
});
<API側>
public function change_date(Request $request)
{
$date_id = $request['date_id'];
if($date_id == 0){
$date = date("Y-m-d");
}else{
$date = date("Y-m-d", strtotime("+".$date_id."day"));
}
//そのdateの授業可能teacherとtimeを出す $available_teachers = DB::table('reservation_calenders') ->select('teacher_id', 'time_id') ->where('date', '=', $date) ->get(); return response()->json([ 'result' => true, 'available_teachers' => $available_teachers ]); }
<li v-for="(row,timeIndex) in rows"> <div class="time col-md-2 border"> @{{row.time}} </div> <div class="teachers col-md-10 border"> <ul> <li v-for="available_teacher in available_teachers"> <div v-if="available_teacher.time_id == timeIndex"> teacher_id:@{{available_teacher.teacher_id}} </div> </li> </ul> </div> </li> ```<html>
よろしくお願いいたします。
質問を受けての追記①
const schedule = new Vue({ el: '#schedule', data: { rows : rows, available_teachers : available_teachers },
表示するときには、↑に保存されているavailable_teachersを利用する
→available_teachersのデータが変われば表示される授業可能の先生がかわる
→ajaxでとってきた授業可能の先生情報をこのavailable_teachersに上書きすることはできないのか??
これができたらhtml側を何一つ修正せずに目的が達成できるのでbestだと思っております。
thisについての解説入りコード
const schedule = new Vue({ el: '#schedule', data: { rows : rows, available_teachers : available_teachers }, methods: { change_date:function(date_id){ const data = { date_id : date_id}; var self = this;//ここでのthisはchange_dateメソッドの呼び出し関数なので、そのobjectであるscheduleを意味する this.$http.post('/ajax/reservation_calender/change_date', data) .then(function(res){console.log(this); self.available_teachers = res.data.available_teachers; //this.available_teachers = res.data.available_teachers; //例えばこの書き方だとメソッドの呼び出しではないただの関数の中にthisがある //=thisはただのwinodwオブジェクト(global object) }).catch(function(error){ // 失敗したとき alert('送信が失敗しました。');//テストのため }); } } });
回答2件
あなたの回答
tips
プレビュー