Vue.jsでインラインコンポーネントを作っていてハマッタので自戒を込めてメモします。

こんな感じのコンポーネントをHTML内にインラインで書いてみたんですよ。

html

<main id="app">
    <table>
        <item v-for="item in list" :hoge="item.hoge"></item>
    </table>

    <script type="text/x-template" id="item-template">
        <tr>
            <td>{{hoge}}</td>
        </tr>
    </script>
</main>

js

new Vue({
    el: '#app',
    data: {
        list: [
            { hoge: 'hoehoe' },
            { hoge: 'foo' }
        ]
    },
    components: {
        item:{
            template: '#item-template',
            props: [ 'hoge' ]
        }
    }
});

なぜか hoge is undefined みたいなエラーが出てくる。
調べても原因がわからない。しかしFiddle上で試してみたら動く。

うーん、うーんと唸ること２時間。

あ！！！

html

<main id="app">
    <table>
        <item v-for="item in list" :hoge="item.hoge"></item>
    </table>
</main>

<!-- #app の外に書く -->
<script type="text/x-template" id="item-template">
    <tr>
        <td>{{hoge}}</td>
    </tr>
</script>

動いた！！

Vue.js の管理エレメント内にテンプレート書いていたから、{{hoge}}の部分が反応しちゃったのか。
なんという単純なミス……。