はじめに
以前の記事の繰り返し表示部分をコンポーネントとして切り出してみる。
コンポーネント
下記の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>