如何将数组中的数据显示出来

如何不再写一个循环的方式将contact_2和contact_3的数据也显示出来

<template>
  <div style="margin:50px 120px;">

    <div v-for="(item,index) in list" :key="index">

      <div style="display: flex;">
        <div v-for="(val,key) in item.contact_1.name">{{val}}</div>
        <span>，</span>
        <div v-for="(val,key) in item.contact_1.mobile"> {{val}}</div>
      </div>

    </div>
    
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          {
            contact_1: { name: ["小王"], mobile: ["0432-87654321"] },
            contact_2: { name: ["是否"], mobile: ["0432-12345678"] },
            contact_3: { name: ["哈哈"], mobile: ["0432-10000000"] },
          },
        ]
      }
    },
    mounted() {

    },
    methods: {
 
    },
  }
</script>

<template>
  <div style="margin:50px 120px;">
    <div v-for="(item,index) in list" :key="index">
      <div style="display: flex;" v-for="(val,key) in item" :key="key">
        <div>{{val.name[0]}}</div>
        <span>，</span>
        <div>{{val.mobile[0]}}</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        list: [
          {
            contact_1: { name: ["小王"], mobile: ["0432-87654321"] },
            contact_2: { name: ["是否"], mobile: ["0432-12345678"] },
            contact_3: { name: ["哈哈"], mobile: ["0432-10000000"] },
          },
        ]
      }
    },
    mounted() {
    },
    methods: {
    },
  }
</script>

感觉你的数据结构有点奇怪，如果可能的话可以改个数据结构，现在的这种感觉会多好多循环

<template>
    <div style="margin: 50px 120px">
        <div v-for="(item, index) in list" :key="index">
            <!-- <div style="display: flex">
                <div v-for="(val, key) in item.contact_1.name">{{ val }}</div>
                <span>，</span>
                <div v-for="(val, key) in item.contact_1.mobile">{{ val }}</div>
            </div> -->
            <div style="display: flex">
                <div>{{ item.name }}</div>
                <span>，</span>
                <div>{{ item.mobile }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // list: [
            //   {
            //     contact_1: { name: ["小王"], mobile: ["0432-87654321"] },
            //     contact_2: { name: ["是否"], mobile: ["0432-12345678"] },
            //     contact_3: { name: ["哈哈"], mobile: ["0432-10000000"] },
            //   },
            // ]
            list: [
                {
                    name: "小王",
                    mobile: "0432-87654321",
                },
                {
                    name: "是否",
                    mobile: "0432-12345678",
                },
                {
                    name: "哈哈",
                    mobile: "0432-10000000",
                },
            ],
        };
    },
    mounted() {},
    methods: {},
};
</script>

如果数据结构不能变感觉要套template在外层做循环了，好麻烦的样子.....