Vue.js でコンポーネントに対して v-for を使う

概要

Vue.js でコンポーネントに対して v-for を使ってみました。 見所は、特にないです。

実装

実装です。「ボク、運命の人です。」の登場人物をデータとして使用しました。

<html>
  <head>
    <script src='https://unpkg.com/vue/dist/vue.js'></script>
  </head>
  <body>
    <div id='app'>
      <ul>
        <character
          v-for='(name, index) in names'
          :name='name'
          :index='index'
          :key='name.id'>
        </character>
      </ul>
    </div>
    <script type='text/javascript'>
      const character = Vue.extend({
        props: {
          'name': String
        },
        template: '<li>{{name}}</li>'
      })

      new Vue({
        el: '#app',
        data: {
          names: ['正木 誠', '湖月 晴子', '四谷 三恵']
        },
        components: {
          'character': character
        }
      })
    </script>
   </body>
</html>

完成

こんな画面になりました。

f:id:takiy33kun:20170517071453p:plain

参考リンク