Laravel5.5 vue.jsを使用し、AJAXを使った実装
→load中にとあるgifファイルを表示させたい
→ajax起動直前にdataに収めてあるloading : falseをtrueにし、html上で表示させる
→https://stackoverflow.com/questions/43969324/how-to-implement-a-before-callback-in-axiosを参考に
以下AJAXの実装部分
Vue.prototype.$http = axios; const schedule = new Vue({ el: '#schedule', data: { available_teachers : available_teachers, loading : false, }, methods: { change_date:function(date_id){ const data = { date_id : date_id}; var self = this;//ここでのthisはchange_dateメソッドの呼び出し関数なので、そのobjectであるscheduleを意味する axios.interceptors.request.use(function(){ return self.loading = true; }); axios.post('/ajax/reservation_calender/change_date', data) .then(function(res){ self.available_teachers = res.data.available_teachers; self.loading = false; }).catch(function(error){ self.loading = false; }); }, //省略
コード内にも記載しましたが、interceptorsを記載するとajax起動されますが、失敗で返ってきます。(interceptorsのコード抜きだと成功する)
関数の書き方など変えておりますが、成功しません。。
よろしくお願いいたします。
//一応html部分も <div v-if="loading"> <img :src="/images/hoge.gif"> </div>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/28 12:43