Q&A
前提・実現したいこと
Vue.jsでaxios.getで取得したjsonをmountedで読み込みたい。
methods:にaxios.getする関数を定義しており、watch:で呼び出すと正常に動作するのですが、同じ関数をmounted:やcreated:で使うとライブラリが読み込めていないかのようなエラーが返ってきます。
発生している問題・エラーメッセージ
下の写真のエラーが出ます。
該当のソースコード
javascript
1var input_form = new Vue({ 2 el:'#input_form', 3 data:{ 4 category_balance:'', 5 category_large:'', 6 test:[],//ここにaxiosで取得したjsonを代入させたい 7 }, 8 methods: { 9 fetch: function(){ //jsonを取得してdata:部のtest:[]に代入 10 axios.get('http://localhost:8000/json_test').then((res)=>{ 11 this.test = res.data 12 }) 13 } 14 }, 15 mounted:function(){ 16 this.fetch(); //ここでエラーが発生する 17 }, 18 watch:{ 19 category_balance:{ 20 handler:function(newVal,oldVal){ 21 this.changed_form='category_balance'; 22 this.fetch();//ここでは正常に取得してDOM画面にも反映されている 23 } 24 }, 25 } 26})
html
1<select class="form-control"> 2 <option v-for="item in test">@{{item.name}}</option>//watch:で代入した時は代入される 3</select> 4//~中略~ 5<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 6</body>
試したこと
axiosライブラリを読むタイミングのせいかなと思い、<script>タグを<head>内にうつしてみましたが同じ結果でした。
関数の中身を直に書いてみてもダメでした。
アドレスを直接urlに叩くと期待通りのjsonは表示されました。
mountedをcreatedにしても同様でした。
補足情報（FW/ツールのバージョンなど）
PHP
Laravel
Vue.js
Crome
VSCode
回答1件
0
ベストアンサー
少なくとも、JSの読み込み順で一番最後にaxiosを読み込む事で
hook:ReferenceError: axios is not defined axiosが定義されていない
と出る可能性が高いです。
headの中でも、vueの処理が行われる前に読み込む必要があります。
（Laravelならapp.jsより前）
投稿2019/11/17 14:50
総合スコア5036
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/11/17 15:47