Q&A
コードがないと、答えようがありません。
HTMLの中にvue.jsを記述しプログラムしていました。
vue.jsを外部ファイルにしたところうまく動作しません。
うまく分離させるにはどのようにすれば良いでしょうか？
HTML
1<html> 2 <head> 3 <meta charset="UTF-8"> 4 <script src="http://vuejs.org/js/vue.min.js"></script> 5 <script src="./myVue.js"></script> 6 </head> 7 <body> 8 <div id="app"> 9 <input type="text" v-model="message"> 10 <div>{{message}}</div> 11 </div> 12 </body> 13</html>
Vue.js
1var vm = new Vue({ 2 el: '#app', 3 data: { 4 message: "" 5 }, 6});
回答3件
0
myVue.jsのscriptタグをbodyタグの末尾に記述すればどうでしょうか？
おそらくbodyタグが読み込まれるより前にmyVue.jsが実行されているので、
Vueのelで指定している#appの要素が実行時点で存在していないことが原因かと思います。
html
1<html> 2 <head> 3 <meta charset="UTF-8"> 4 <script src="http://vuejs.org/js/vue.min.js"></script> 5 </head> 6 <body> 7 <div id="app"> 8 <input type="text" v-model="message"> 9 <div>{{message}}</div> 10 </div> 11 <script src="./myVue.js"></script> 12 </body> 13</html>
投稿2015/07/16 11:24
編集2015/07/16 11:27
総合スコア66
ではHTMLファイルとVue.jsを分離させることは不可能ということでしょうか？
いいえ、bodyタグの末尾でmyVue.jsを読みこめば、bodyタグの中身が読み込まれたあとに、myVue.jsが実行されるようになるので、ファイルに分割できるようになります
```html
<body>
<div id="app">
<input type="text" v-model="message">
<div>{{message}}</div>
</div>
<script src="./myVue.js"></script>
</body>
```
もしくは、window.onloadを用いて、ページの読み込み完了後に実行する方法もあります
```javascript
window.onload = function() {
var vm = new Vue({
el: '#app',
data: {
message: ""
},
});
}
```
0
head 内で script を読み込んだ時には、
body の中身はまだありません。
（id="app" を探せない）
HTML
1<body onload="onLoad();">
Javascript
1function onLoad() { 2var vm = new Vue({ 3 el: '#app', 4 data: { 5 message: "" 6 } 7}) 8} 9
投稿2015/07/16 12:27
退会済みユーザー
総合スコア0
0
ちょっと抽象的すぎます・・・
どのコードが動作してどのコードが動作しないのかの切り分けをしましょう。
質問するなら、ここまで動くけど、ここから動かないとか、具体例を出さないと誰も答えようが無いですよ・・
一応言っておくと、Javascriptを外部ファイルにして動作しない場合の多くの原因はパスの間違いです。
特に相対パスで書いたような場合、読み込むHTMLと読み込まれるJSの配置場所が違うなら、そこを注意してみましょう。
そもそもHTMLでちゃんと読み込まれているのか？
じゃあどこまでは動いてて、どこで動かなくなっているのか？
ブラウザのデバッグツール（コンソール等）を使って確認しましょう。
今の質問者さんの情報で答えられるのはこれくらいかと思いますよ。
投稿2015/07/16 08:46
総合スコア1614
上にあげた例はHTMLファイルとJSファイルを分離させた時の場合です。Vueオブジェクトの範囲外でconsole.log("test");とした場合正常に動作していたので、パスの間違いはありません。
分離させずに、bodyの閉じタグ直前に上記のプログラムを記述したとろこ動きましたが、分離させると動きません。
あなたの回答
tips
プレビュー
