こんにちは、ゆきねこです。
最近vue.jsを導入しようと勉強中なのですが、苦戦したエラーがあったのでその解決法を書いておきます。
問題のプログラムは以下です。
<script>
new Vue({
el:'#app',
data: {
message:"hello"
}
});
</script>
</head>
<body>
<div id="app">
<p>
{{message}}
</p>
</div>
</body>
このプログラムで問題ないと思っていたのですが、以下のエラーがでてうまくできませんでした。
[Vue warn]: Cannot find element:
原因を探ってみると、htmlの記述の順番でした。
以下のように記述すると実行できました。
<body>
<div id="app">
<p>
{{message}}
</p>
</div>
</body>
<script>
new Vue({
el:'#app',
data: {
message:"hello"
}
});
</script>
htmlが上から読み込んで行く為、vue.jsの部分が読み込まれた時に該当のDOMが存在しないからエラーだったのだと思います。
0件のコメント