Vue.js で再起呼び出しの処理を実装する

##実装したいこと
多次元配列のような親子関係のあるデータをリレーショナルデータベースに登録するフォームの開発を行う。
流れとしては、LaravelとVueを利用して、データの取得・登録をLaravelで行い、Vueのコンポーネントにデータを受け渡す。

##作成するページ
・一覧画面

##テーブル構造

ID	name	parent
1	東京都	0
2	港区	1
3	新宿区	1
4	歌舞伎町	3
5	六本木	2
6	赤坂	2
7	赤坂一丁目	6
8	赤坂二丁目	6

想定するデータの構造

親　：　子
多　：　１

東京都　←第一階層

• 港区　←第二階層
  　 - 六本木　←第三階層
  　 - 赤坂　←第三階層
  　 　 - 赤坂一丁目　←第四階層
  　 　 - 赤坂二丁目　←第四階層
• 新宿区　←第二階層
  　　- 歌舞伎町　←第三階層

#Blade
一覧画面

index.blade.php

@extends('layouts.app')

@section('content')
<div class="container" id="app">
    <div class="row justify-content-center">
        <div class="col-md-12">
        <group-component 
                :areas='{!! json_encode($data) !!}'
                >
        </group-component>
        </div>
    </div>
</div>
@endsection

##LaravelからVueに受け渡されるデータ

{
    "0": {
        "id": 1,
        "name": "東京都",
        "parent": 0,
        "children": [
            {
                "id": 2,
                "name": "港区",
                "parent": 1,
                "children": [
                    {
                        "id": 5,
                        "name": "六本木",
                        "parent": 2
                    },
                    {
                        "id": 6,
                        "name": "赤坂",
                        "parent": 1006,
                        "children": [
                            {
                                "id": 7,
                                "name": "赤坂一丁目",
                                "parent": 6
                            },
                            {
                                "id": 8,
                                "name": "赤坂二丁目",
                                "parent": 6
                            }
                        ]
                    }
                ]
            },
            {
                "id": 3,
                "title": "新宿区",
                "parent": 1,
                "children": [
                    {
                        "id": 4,
                        "name": "歌舞伎町",
                        "parent": 3
                    }
                ]
            }
        ]
    }
}

##コンポーネント
デザインについては、Bootstrapを利用してます。

一覧画面

GroupComponent.vue

<template>
    <div>
        <div class="card">
            <div class="card-header">
                都道府県 
            </div>
            <div class="card-body">
                <span v-for="area in areas" :key='area.id'>
                <ul><li>{{area.name}}
                  <item-component
                        :area="area"
                    />
                </li></ul>
                </span>
            </div>
        </div>

    </div>
</template>

<script>

    import ItemComponent from './contents/ItemComponent.vue';


    export default {
        components: {
            ItemComponent
        },
        props: {
            id: Number,
            areas: Object,
        }
    }
</script>

GroupComponent.vueから呼び出されるコンポーネント

ItemComponent.vue

<template>
      <ul >
        <li       
            class="reply"
            v-for="reply in area.children"
            :key="reply.id">
              <span>{{reply.id}}</span>
              <span>{{reply.name}}</span>
            <item-component :area="reply"></item-component>
        </li>
      </ul>
</template>

<script>
import ItemComponent from './ItemComponent.vue';

export default {
  name: 'item-component',
  components: {
      ItemComponent
  },
  props: {
    area: {
      type: Object,
      required: true
    }
  }
}
</script>
<style>
@charset 'utf8';
/* コンポーネントをネスト的に段落を落とす  */
.reply {
  display: block;
  margin-left: 3rem;
  margin-top: 1rem;
}
</style>

##最後に
今後、ネスト階層の情報を持った登録フォームの登録を実装したいので、
親子関係の情報を保持して登録できるフォームの最適な方法を模索していきます。