日頃の行い

個人的な日頃の行いをつらつら書いてます＼＼\\ ٩( 'ω' )و //／／

vue.jsで"Uncaught TypeError: Cannot read property 'tagName' of null "

JavaScript Error

vue.jsで遊んでたらエラーが出ました。

Uncaught TypeError: Cannot read property 'tagName' of null

こんなん。
とりあえずググります。

jsのエラーだしなー出ないよなー
と思ったら出ました(・∀・)


scriptがheadタグ内に書かれててbodyが描画される前に実行されてるからだよ。
だそうです。
ではファイルをとりあえず見てみようと思います。

書いたファイル群

構成

├── assets
│   ├── common.css
│   └── common.js
├── board.html
├── bower.json
├── bower_components
│   └── vue
└── index.html

htmlファイル

board.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="assets/common.css">
<script src='bower_components/vue/dist/vue.js'></script>
<script src='assets/common.js'></script>
<title>hoge</title>
</head>
<body>
     <div id="demo">
         <h1>messageを入力</h1>
         <input type="text" v-model='message' />
         <input type="button" value='送信'>
         {{message}}
    </div>
</body>
</html>

javascript( common.js )とcss ( common.css )

var demo = new Vue({
    el: '#demo',
    data: {
        message:'hogehoge'
    }
});

body {
    font-family: Helvetica Neue, Arial, sans-serif;
}

li.done {
    text-decoration: line-through;
}

そうですよね。
onloadとか$(document).ready(function(){}とかscriptタグを後にするとか
そのような書き方にして、bodyが生成されるのを待たないといけませんよね。

とりあえず以下のようにbodyの最後にscriptを移動しました。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="assets/common.css">
<script src='bower_components/vue/dist/vue.js'></script>
<title>hoge</title>
</head>
<body>
     <div id="demo">
         <h1>messageを入力</h1>
         <input type="text" v-model='message' />
         <input type="button" value='送信'>
         {{message}}
    </div>
<script src='assets/common.js'></script> <!-- ここに移動 -->
</body>
</html>

これで動きました。