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

Question

如何不再写一个循环的方式将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>

Answer 1

<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>