Vue.jsのcomponentを使ってリスト表示

Vue.jsを使って、もっと実践的なリスト表示をしたい。ということで、ドキュメント参照です。

jp.vuejs.org

コンポーネントとv-forが一番しっくり来る書き方だったので、参考につくってみます。

<div id="name-list-example">
    <div
      is="name-item"
      v-for="(item, index) in lists"
      v-bind:key="item.id"
    ></div>
</div>

<script>
Vue.component('name-item', {
  template: '\
<div class="item">\
        <div class="content">\
            <div class="header"><img :src="\'image/\'item.img_src + \'.png\'">{{item.name}}：{{item.name_kana}}</div>\
        </div>\
</div>\
  ',
  props: ['item']
})

new Vue({
  el: '#name-list-example',
  data: {
    lists: [
      {
        id: 1,
        name: '太郎',
        name_kana : 'たろう',
        img_src:'taro',
      },
      {
        id: 2,
        name: '花子',
        name_kana : 'はなこ',
        img_src:'hana',
      },
      {
        id: 3,
        name: '次郎',
        name_kana : 'じろう',
        img_src:'ziro',
      }
    ],
  },
})
</script>

確かこんな感じのソースを書いたはず。listsの配列にデータを渡すだけで、componentのtemplateの内容をリストで表示させる感じになります。

listsに渡すデータはjqueryのajaxを利用したりしてます。

これをパーツごとに作ったり、表示は動的コンポーネントを利用して色々な表示に切り替えができるのではないかと思っています。

かなり実用的な感じになったはず！！

あとはフォームを利用して、もっとインタラクティブにできればやりたいことが動作しそうです。

まだまだドキュメントが読みきれてないです。。。