vue实现 前端处理嵌套数据问题

我们在开发的时候，有时会遇到类似于三级联动的问题，这时候后端传过来的数据类型为数组包含对象，对象再包含数组，数组再包含对象的层级关系，如下图：

我们要实现的效果类似elementUI中的级联选择器
如下图：

<template>
  <div class="hello">
		<div class="l div1">
			<div v-for="(item , i) in mydata" :class="{mycolor : i == num1}" @click="nameClick(i)">
				<div>{{item.name}}</div>
			</div>
		</div>
		<div class="l div2">
			<div v-for="(item1,a) in mydata[num1].selfinform" :class="{mycolor2 : a == num2}" @click="div2Click(a)">
				<div>{{item1.age}}</div>
			</div>
		</div>	
		<div class="l div3">
			<div v-for="(item2) in mydata[num1].selfinform[num2].otherInner">
				<div>{{item2.Number}}</div>
			</div>
		</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods:{
	  nameClick(i){
		  this.num2 = 0
		  this.num1 = i
		  console.log("我是num1的i:" + i)
	  },
	  div2Click(a){
		  this.num2 = a
		  console.log("我是num2的a:" + a)
	  }
  },
  data () {
    return {
			num1:0,
			num2:0,
			mydata : [
			            {
			                name:'指南',
			                selfinform:[
			                    {
			                        age:"设计原则",
			                        otherInner:[
			                            {
			                                Number:"一致"
			                            },
										{
			                                Number:"反馈"
			                            },
										{
			                                Number:"效率"
			                            },
										{
			                                Number:"可控"
			                            }
			                        ]
			                    },                    
			                    {
			                        age:"导航",
			                        otherInner:[
			                            {
			                                Number:"侧向导航"
			                            },
										{
			                                Number:"顶部导航"
			                            }
			                        ]
			                    }
			                ]
			            },
			            {
			                name:'组件',
			                selfinform:[
			                    {
			                        age:"basic",
			                        otherInner:[
			                            {
			                                Number:"layout布局"
			                            },
										{
										    Number:"color色彩"
										},
										{
										    Number:"typography字体"
										},
										{
										    Number:"icon图标"
										},
										{
										    Number:"button按钮"
										},
										{
										    Number:"Radio单选框"
										}
			                        ]
			                    },                    
			                    {
			                        age:"form",
			                        otherInner:[
			                            {
			                                Number:"color色彩"
			                            }
			                        ]
			                    },
								{
			                        age:"data",
			                        otherInner:[
			                            {
			                                Number:"typography字体"
			                            }
			                        ]
			                    },
								{
			                        age:"notice",
			                        otherInner:[
			                            {
			                                Number:"icon图标"
			                            }
			                        ]
			                    },
								{
			                        age:"navigation",
			                        otherInner:[
			                            {
			                                Number:"button按钮"
			                            }
			                        ]
			                    },
								{
			                        age:"others",
			                        otherInner:[
			                            {
			                                Number:"Radio单选框"
			                            }
			                        ]
			                    }
			                ]
			            },
						{
			                name:'资源',
			                selfinform:[
			                    {
			                        age:"Axure Components",
			                        otherInner:[
			                            {
			                                Number:1873333333311
			                            }
			                        ]
			                    },                    
			                    {
			                        age:"Sketch Templates",
			                        otherInner:[
			                            {
			                                Number:1560088008811,
			                            }
			                        ]
			                    },
								{
			                        age:"组件交互文档",
			                        otherInner:[
			                            {
			                                Number:18788888888
			                            }
			                        ]
			                    }
			                ]
			            }
			        ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	*{
		margin: 0;
		padding: 0;
	}
	.div1,.div2,.div3{
		border: 1px solid red;
		width: 200px;
	}
	.div1 > div{
		text-align: center;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid black;
		box-sizing: border-box;
	}
	.div2 > div{
		text-align: center;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid black;
		box-sizing: border-box;
	}
	.div3 > div{
		text-align: center;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid black;
		box-sizing: border-box;
	}
	.div2{
		border: 1px solid green;
	}
	.div3{
		border: 1px solid blue;
	}
	.l{float: left;}
	
	.mycolor{
		background-color: yellow;
	}
	.mycolor2{
		background-color: cyan;
	}
</style>

最终效果：

这里我是使用vue实现的这个效果
具体思路：
首先循环第一层数组，将里面的信息输入到第一列，因为循环的时候可以获取到对应的下标，所以我们可以在第二列循环对应下标中的数据，可以先给其默认值num1 ：0，num2 : 0，这样的话，初始状态就会直接显示第一行的数据
之后给第一列的标签添加点击事件，当点击之后根据对应的下标动态修改num1的值，点击事件触发时，第二列渲染的数据就会随着num1的改变而改变

注意：
这里我发现一个问题，指南、组件、资源分别对应的第二列 ，第三列的数据量是不同的，如果我们点击组件时，第二列会显示六条数据，我们点击一下其中的others，这时num2的下标就是5，这时，如果我们再点击指南，因为它的第二列只有两条数据，所以会报错
解决方案：
给nameClick(i)的点击事件中添加this.num2 = 0 这样就可以使数据初始化，报错的情况也就消失了