【Nuxt.js】テーブル要素のコンポーネント化

既存のWebページも、Atomic Design（コンポーネント思考を使ったデザインシステム）で捉え直して、環境を新しくしていきましょうみたいな取り組みが社内であって、
それに基づいて、Nuxtでコンポーネントを再設計しようとしていたときに、悲しいコードを散見したのでちょっとメモを残しておこうと思います。

私の会社では、利用規約とか、キャンペーン詳細とか、大事なことをまとめる時に、テーブル（表）をよく使うのですが、
Nuxt.jsで既存コードのコンポーネント化をしていくなかで、こういう表をOrganismsにまるっと入れてしまっているだけのパターンや、
行や列の1つ1つの要素をAtomsに入れているパターンと何回か遭遇したので、こんな感じにするとデータ管理も結構楽になるよというものです。

ディレクトリ構成は以下のようである場合です。

- src
　　L assets
　　L components
　　　　L atoms
　　　　L molecules
　　　　　　L gridTable.vue
　　　　L organisms
　　　　　　L detail.vue
　　L pages
　　　　L index.vue

2つのコンポーネント(gridTable.vue、detail.vue)を用意しています。
全体のページの中で、テーブル形式で記載したい詳細内容をdetail.vueに、それらをテーブル形式で表示する構造部分をgridTable.vueで持っているイメージです。

<- parent: table.vue !->
<template>
 <grid-table :data="tableData" :columns="tableColumns" />
</template>

<script>
import gridTable from '~/components/Molecules/gridTable'

export default {
 name: 'Detail',

 components: {
   gridTable
 },

 data() {
   return {
     tableData: [
       {
         item: 'ほげほげ',
         description:
           'ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ'
       },
       {
         item: 'ほげほげ',
         description:
           'ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ'
       },
       {
         item: 'ほげほげ',
         description:
           'ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ'
       },
       {
         item: 'ほげほげ',
         description:
           'ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ'
       }
     ],
     tableColumns: ['item', 'description']
   }
 }
}
</script>

<style lang="scss" scoped>
@import '~/assets/css/setting/_hogehoge.scss';
</style>

<- child: gridTable.vue !->
<template>
 <section id="detail" data-ult="on">
   <h3>テーブル要素</h3>
   <div class="grid-table">
     <no-ssr>
       <table>
         <tbody>
           <tr v-for="(entryVal, entryKey) in iterationData" :key="entryKey">
             <td v-for="key in columns" :key="key">
               <p v-html="entryVal[key]" />
             </td>
           </tr>
         </tbody>
       </table>
     </no-ssr>
   </div>
 </section>
</template>

<script>
export default {
 name: 'Table',
 props: {
   data: Array,
   columns: Array
 },
 computed: {
   iterationData() {
     let data = this.data

     return data
   }
 }
}
</script>

<style lang="scss" scoped>
@import '~/assets/css/setting/_hogehoge.scss';
</style>

以上！