Vue.js Componentは、何らかのタグでラップしよう

コンポーネントでテンプレートを設定する場合

少し戸惑った内容を備忘録としてメモします。vue.jsのcomponent周りのprop伝達作法を使った場合ですので、ver0.12以降が対象です。

<div id="contents">
 <componentHoge item={{fuga}}></componentHoge>
</div>
<script>
var main = new Vue({
  el: "#contents",
  data: {
    fuga: 1
  },
  components: {
    'component-hoge': {
       replace: true,
       props: ['item'],
       template: "#for-hoge",
       data: function () {
         return { item: null}
       }
  });
</script>
<script type="text/x-template" id="template-combine-table">
  <div>hogehoge</div>
</script>

のようなベーシックな構造を書いた場合で、例えば、fugaが1以外の場合のみ表示する「v-if」を描こうとした場合、

<script type="text/x-template" id="template-combine-table">
  //item（fuga）が1ではない時だけ表示
  <div v-if="item != 1">hogehoge</div>
</script>

とかいても、うまく反映されません。実際に書き出されるコードをみると、

<div item="1"></div>

と書きだされてしまいます。これは、componentのreplaceフラグをtrueとしていることで、が

に置き換えられているためです。正しく動作させる場合は、置き換え用のタグでラップしてあげましょう。

<script type="text/x-template" id="template-combine-table">
<div>  
    <div v-if="item != 1">hogehoge</div>
</div>
</script>

もしくは、単に、

<componentHoge v-if="fuga != 1" item={{fuga}}></componentHoge>

と、componentタグ側に指定してあげても大丈夫です。