こんにちは、ゆきねこです。

最近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が存在しないからエラーだったのだと思います。

 

おすすめの書籍

カテゴリー: JavaScript

0件のコメント

コメントを残す

メールアドレスが公開されることはありません。