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