JavaScript
vue.js

Vue.jsのインラインコンポーネントでハマったこと

More than 1 year has passed since last update.

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上で試してみたら動く。

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

あ!!!


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}}の部分が反応しちゃったのか。

なんという単純なミス……。