laravel5.5・vue.js Ajax使用時に返り値を利用し対象部分のみを切り替えるには？？

Laravel5.5 vue.jsにてonline学校のシステムを作成しております。
画像は生徒側画面、いつどの時間にどの先生の授業が受講可能か見れます。
(デフォルトでは本日(4/18)の情報が見れます)

実現したいこと

例えば「19」をclick
→ajaxにてPHP側で19日に授業可能な先生の情報をとってくる
→画面が非同期で切り替わる

現状

「ajaxの返り値を正確にもらっているが、画面が切り替わらない」
詳細はコード内に記載いたしました。

<JS> ``` Vue.prototype.$http = axios; const rows = @json($rows); var available_teachers = @json($available_teachers); const now = new Date();

                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
    ]);
}

<html>

<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> ```

console.logの結果

よろしくお願いいたします。

質問を受けての追記①

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('送信が失敗しました。');//テストのため
            });
        }
    }
});

m.ts10806

2018/04/18 06:53

タイトルと質問内容、現状が合っていないように思います。実際は「切り替える処理をどう書いたらいいか分からない」では？

kazoogon

2018/04/18 06:56

すみません、ご指摘の通りです。修正いたしました。

m.ts10806

2018/04/18 07:51

「画面を切り替える」のでしょうか「時間割の対象部分だけを更新する」のでしょうか。「画面を切り替える」だと別画面に遷移したりリロードしたりというイメージになるのですが。

kazoogon

2018/04/18 07:56

「対象部分のみを切り替える」でした、申し訳ございません

行動規範の内容に同意します

回答2件

ベストアンサー

js
1const schedule = new Vue({
2    el: '#schedule',
3    data: {
4        rows : rows,
5        available_teachers : available_teachers
6    },
7    methods: {
8        change_date:function(date_id){
9            const data = { date_id : date_id};
10            this.$http.post('/ajax/reservation_calender/change_date', data)
11                .then(function(res){
12// ajaxでとってきた授業可能の先生情報をこのavailable_teachersに上書きすることはできないのか？？ とは
13// この様にしても反映されないということをおっしゃりたいのでしょうか?
14                  available_teachers = res.data.available_teachers;
15// そうであればここは、以下のように記述する必要があります。
16                  this.available_teachers = res.data.available_teachers;
17                }).catch(function(error){
18                    alert('送信が失敗しました。');//テストのため
19            });
20        }
21    }
22});

追記(訂正)

上記の記載でaxiosで戻ってきたthenでajaxから受け取ったデータを
this.available_teachers = res.data.available_teachers;
このように記載するように回答しましたが、
ここでのthisはfunction(res){}を指してしまいますね。
javascriptのはまりポイントです。
このようなときはthisを一旦別の変数下記の例ではselfに退避して使うのが定石です。
javascriptの新しい仕様 ES2015ではアロー関数という書き方で解決できますがこちらはまた調べてみてください。

var self = this;
this.$http.post('/ajax/reservation_calender/change_date', data)
    .then(function(res){
       self.available_teachers = res.data.available_teachers;
    }).catch(function(error){
       alert('送信が失敗しました。');//テストのため
    });

簡単なサンプル https://jsfiddle.net/euledge/ev9sn0eg/

thisについての説明記事
JavaScript の this を理解する多分一番分かりやすい説明

また、直接質問とは関係ないですがvueJSの開発をされるときは chrome,firefoxのアドオンで Vue.js Devtoolsというものがありますので使ってみると良いと思います。
vueの data{}の中の変数の値を見たり、設定したりできます。私も今手放せないツールの一つです。
Vue.js Devtoolsの導入方法と機能まとめ。Vue.jsを用いた開発を効率化させよう！

投稿2018/04/19 07:17

編集2018/04/19 16:43

euledge

総合スコア2404

kazoogon

2018/04/19 12:19

回答ありがとうございます。こちらの書き方で試してみましたが、表示部分に変化はないですね。。

kazoogon

2018/04/20 01:56

回答ありがとうございます、thisについての理解が自分でコードを書いてからでしたので理解がすぐにできました！　またthisの中での「クリックした時にinput要素そのものを取得することが出来る」、これは表のカラムindexなどを簡単に取れると思うのでそちらでも使用してみようと思います。非常に助かりました！

行動規範の内容に同意します

vue環境ないので考え方のみの回答とさせていただきます。
vueの記法に逐一置き換えていただければと。

1.　各時間割にIDを振っておく（dateとtime_idを持たせる）

js
1'<div id="available_teachers_'+date+'_'+time_id+'" v-if="available_teacher.time_id == timeIndex">';

2.　取得した情報をそのIDに向かって入れる。

js
1var teachers= res.data.available_teachers;
2for(var i ;i<teachers.length;i++){
3    teacher_info = "teacher_id:"+teacheas[i].teacher_id;
4    $("div#available_teachers_"+date+"_"+teachers[i].time_id).html(teacher ); 
5    //html()だと中身上書きするので、元のデータの後ろに付け加えたりした方がいいかも？
6    //ただし付け加えた場合に同じ先生の情報が加算され続けるので元の情報を一度消すとかそういう工夫が必要
7}
8