Comment afficher les données d'un tableau

Comment ne plus écrire une boucle vacontact_2Etcontact_3Les données de

<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: ["Xiao Wang."], mobile: ["0432-87654321"] }, contact_2: { name: ["Est - ce que"], mobile: ["0432-12345678"] }, contact_3: { name: ["Ha Ha!"], mobile: ["0432-10000000"] }, }, ] } }, mounted() { }, methods: { }, }</script>

Adopter les réponses：

<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: ["Xiao Wang."], mobile: ["0432-87654321"] }, contact_2: { name: ["Est - ce que"], mobile: ["0432-12345678"] }, contact_3: { name: ["Ha Ha!"], mobile: ["0432-10000000"] }, }, ] } }, mounted() { }, methods: { }, }</script>

Autres réponses2：

J'ai l'impression que votre structure de données est un peu bizarre , Si possible, vous pouvez modifier la structure des données , C'est comme ça que ça va tourner

<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: ["Xiao Wang."], mobile: ["0432-87654321"] }, // contact_2: { name: ["Est - ce que"], mobile: ["0432-12345678"] }, // contact_3: { name: ["Ha Ha!"], mobile: ["0432-10000000"] }, // }, // ] list: [ { name: "Xiao Wang.", mobile: "0432-87654321", }, { name: "Est - ce que", mobile: "0432-12345678", }, { name: "Ha Ha!", mobile: "0432-10000000", }, ], }; }, mounted() {}, methods: {},};</script>

Si la structure des données ne peut pas être changée, sentez - vous que vous avez besoin d'un ensemble template J'ai fait un cycle à l'extérieur , C'est gênant. .....