はじめに

以前の記事の繰り返し表示部分をコンポーネントとして切り出してみる。

コンポーネント

下記のjsを用意

item.js

var ItemComponent = Vue.extend({
    template:
        '<div class="item">' +
            '<div>ID: {{item.id}}</div>' +
            '<div>名前: {{item.name}}</div>' +
            '<div>値: {{item.value}}</div>' +
        '</div>',
    props: ['item']
})

コンポーネントの登録

index.jsでcomponentsを指定してコンポーネントを登録

index.js

var app = new Vue({
    el: '#app',
    data: {
        results: []
    },
    components: {
        'item-component': ItemComponent
    },
    mounted () {
        axios
            .get("api.php")
            .then(response => {this.results = response.data})
    }
});

HTMLでコンポーネントを使う

index.html

    <body>
        <div id="app">
            <div class="itemContainer">
                <item-component v-for="result in results" :key="result.id" v-bind:item="result"></item-component>
            </div>
        </div>
        <script src="item.js"></script>
        <script src="index.js"></script>
    </body>