Q&A
どういう問題が起きていますか？
実現したいこと
javascriptとhtmlを分割し、vueとaxiosを使いたい。
前提
vueとaxiosを利用したいです。
発生している問題・エラーメッセージ
取得したデータ：{{ id }}
該当のソースコード
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Vue Sample App | AI Academy</title> 5 <meta charset="UTF-8"> 6 <!-- Load Vue.js--> 7 <script src="https://unpkg.com/vue@next"></script> 8 <script src="tameshi.js"></script> 9 <!-- Add Axios CDN --> 10 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> 11 </head> 12 <body> 13 <div id="app"> 14 <p>取得したデータ：{{ id }}</p> 15 </div> 16 </body> 17</html>
javascript,Vue
1Vue.createApp({ 2 data() { 3 return { 4 id: '', 5 }; 6 }, 7// テストとプロトタイプのための無料の偽API を使用 8 created() { 9 axios 10 .get('https://jsonplaceholder.typicode.com/posts/1') 11 .then(response => { 12 this.id = response.data.id; 13 }) 14 .catch(error => { 15 console.error(error); 16 }); 17 }, 18}) 19.mount('#app');
試したこと
htmlと一体では機能しました。
補足情報（FW/ツールのバージョンなど）
mac os 13.4
safariでhtmlを実行しています。
取得したデータ：{{ id }}と表示されます。取得したデータ:1と表示したいです。
JavaScript コンソールにエラーメッセージは出てませんか？
(Safari の場合、開発メニューを有効にする必要があるかも。)
https://kojikalog.com/mac_development_tools_for_safari/
[Info] You are running a development build of Vue. (vue.global.js, line 10906)
Make sure to use the production build (*.prod.js) when deploying for production.
[Vue warn]: Failed to mount app: mount target selector "#app" returned null.
Not allowed to load local resource: file:///favicon.ico
が表示されています。
エラーメッセージ (今回は Failed to mount app: mount target selector "#app" returned null.) で検索すると答えにたどり着けることが多いです。今後のご参考まで。
ありがとうございます
回答2件
0
scriptをasync(もしくはdefer)で読んでみては？
HTML
1<script src="tameshi.js"></script> 2↓↓↓ 3<script src="tameshi.js" async></script>
投稿2023/08/25 01:48
総合スコア117674
0
ベストアンサー
<script src="tameshi.js"></script>をbodyの最後に移動してみてはどうでしょうか。
投稿2023/08/25 00:33
総合スコア37421
ですね、vueをCDNで用いる場合はDOMを読み込ませてからでないと適用できないはずです。具体的にはDOM上のidの場所に対し、Vueディレクティブをマウントするという仕組みですね。
おかげで成功しました。ありがとうございます。
お役に立てたようで何よりです。
あなたの回答
tips
プレビュー
