ひとりまとめ

もろもろのメモ

Vue.componentを初めて使ってちょっとハマった

日本語のドキュメントも充実しているVue.js。

それを頼りにちまちまとコンポーネントを試してました。

jp.vuejs.org

コンポーネントの登録はこうするらしい。

// todo-item と呼ばれる新しいコンポーネントを定義 Vue.component('todo-item', {
    template: '<li>This is a todo</li>'
})

ほうほう。そしてこう書けば置き換わるらしい。

<ol>
    <!-- todos 配列にある各 todo に対して todo-item コンポーネントインスタンスを作成する -->
    <todo-item></todo-item>
</ol>

あれ。何も表示されない・・・。ただこれだけなのになぜ・・・。

 

と思ったら、HTMLの部分にこれを書いただけだとどこにVueのを適用するのかわからないのでした!どこに適用して欲しいのかを知らせる必要があると。

 

ということで、まずvueのオブジェクトを作っておく。

new Vue({
    el: "#todo-list",
});

そして、HTMLの方でもelに対応するidをしてしておく。

<div id="todo-list">
    <ol>
        <!-- todos 配列にある各 todo に対して todo-item コンポーネントインスタンスを作成する -->
        <todo-item></todo-item>
    </ol>
</div>

こうすると、todo-itemのところが置き換わって出力されました。

 

そっか。そりゃそうだな。

広告を非表示にする