如何处理数组中的数组循环展示问题

要实现的效果是页面有2个可点击的按钮（NewType），点击当前的按钮（NewType）下面展示出对应的NewList中的Title。实现效果图如下：

数据格式如下：

NewData: [{
		"Id": "235917348760977408",
		"NewType": "测试新闻",
		"NewList": [{
				"Id": "235918669983514624",
				"Title": "测试数据不可为真",
			},
		]
	},
	{
		"Id": "203399992872796160",
		"NewType": "行业新闻",
		"NewList": [{
				"Id": "211284456219082752",
				"Title": "222222",
			},
			{
				"Id": "211283345504468992",
				"Title": "瞭望丨加快产业数字化智能化抢占竞争制高点",
			},
			{
				"Id": "211282111284379648",
				"Title": "喜欢冰淇淋",
			}
		]
	}
]

html代码

方法一：

 <template>
     <div>
        <div v-for="newsType in NewData" :key="newsType.Id">
          <div @click="changeTable(newsType.Id)">  {{ newsType.NewType }} </div>
          <ul>
            <li v-for="newsItem in newsType.NewList" :key="newsItem.Id" 
              v-if="newsType.Id== tableIndex">
              <div>{{ newsItem.Title }}</div>
            </li>
          </ul>
        </div>
     </div>
</template>

方法二：我这里写了样式就这样了，大家方法一。

<template>
    <div>
     <div v-for="(item, index) in NewData" @click="changeTable(item.Id)"
        :class="tableIndex == item.Id ? 'activeATable' : ''" >
          {{ item.NewType }}
      </div>
        
      <div>
        <div v-for="newsType in NewData" :key="newsType.Id">
          <ul>
            <li v-for="newsItem in newsType.NewList" :key="newsItem.Id" 
                v-if="newsType.Id== tableIndex">
              <div>{{ newsItem.Title }}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>

初始化和方法

<script>
    data(){
        return{
            NewData:[],//上面的数据
            tableIndex:"0",
    },
    methods:{
        changeTable (index) = {
          this.tableIndex = index
        }
    }
}
</script>

高亮

<style lang="less" scoped>

  .activeATable {
    color: #03358E;
  }

</style>

这里样式就没写了,只有高亮留下来了，同时这里v-for和v-if一起使用了，请大家慎用。最好用v-show替换一下。