vue.jsのv-componentで少しだけハマった件

こんにちわ、みけです。

ふとしたきっかけで、vue.jsをいじっています。

v-componentについて

vue.jsではv-componentという属性を設定することで、script要素で指定したテンプレートを使いまわすことができます。

例えば、次のような構造をもっているとします。

<div id="shop">
  <h1 v-text="title"></h1>
  <div v-component="items" v-with="model: fruits"><div>
</div>
<script type="text/x-template" id="fruits-component">
  <div>
    <span v-text="model.name"></span>
  </div>
</script>

で、jsはこんな感じ。

Vue.component("items", {
    template: "#fruits-component"
});
var fruits = new Vue({
    el: "#shop",
    data: {
        title: "ワイワイショッピング",
        fruits: {
            name: "バナナ"
        }
    }
});

そうすると、だいたいこんな感じの画面が出来上がります。

ハマったところ

さて、僕が最初、上記のようなやつを作ってた時に、v-componentのところが、どうしても表示できないというので30分ほどハマっていました。

その時のhtmlはこんな感じ。

<div id="shop">
  <h1 v-text="title"></h1>
  <div v-component="items" v-with="model: fruits"><div>
</div>
<script type="application/javascript" src="js/vue.js"></script>
<script type="application/javascript" src="js/my.js"></script>
<script type="text/x-template" id="fruits-component">
  <div>
    <span v-text="model.name"></span>
  </div>
</script>

表示された時のhtmlはこんな感じ。

<div id="shop">
  <h1 v-text="title"></h1>
  <div v-component="items" v-with="model: fruits"><div>
</div>
<script type="application/javascript" src="js/vue.js"></script>
<script type="text/x-template" id="fruits-component">
  <div>
    <span v-text="model.name"></span>
  </div>
</script>
<script type="application/javascript" src="js/my.js"></script>

僕がはまってたのは、単純にDOMが解析された後にcomponentの作成をしていなかったから表示されていなかっただけで、js/my.jsをテンプレートの後にロードするようにするなどをしておけば、表示されてたよという話でした。