Javascript 我能'；垂直t形环，使用v形表示i'；m堆栈

我正在使用VueJS处理一个小项目，我尝试循环使用

主体变量

，但我看不到

这是我的代码：

<tr v-for="(row, i) in [body]" :key="`row-${i}`">
    <td v-for="(field, j) in mappedFields" :key="`mfield-${j}`">
         {{row[field]}} -
    </td>
</tr>

{
    name: ["amine", "bill"],
    adress: ["montreal", "new york"]
    company: ["apple", "microsoft"]
    email: ["my@gmail.com", "john@microsoft.com"]
    phone: [5497821445449, 559485556555]
}

我得到的结果：

<tr v-for="(row, i) in [body]" :key="`row-${i}`">
    <td v-for="(field, j) in mappedFields" :key="`mfield-${j}`">
         {{row[field]}} -
    </td>
</tr>

{
    name: ["amine", "bill"],
    adress: ["montreal", "new york"]
    company: ["apple", "microsoft"]
    email: ["my@gmail.com", "john@microsoft.com"]
    phone: [5497821445449, 559485556555]
}

预期结果：

<tr v-for="(row, i) in [body]" :key="`row-${i}`">
    <td v-for="(field, j) in mappedFields" :key="`mfield-${j}`">
         {{row[field]}} -
    </td>
</tr>

{
    name: ["amine", "bill"],
    adress: ["montreal", "new york"]
    company: ["apple", "microsoft"]
    email: ["my@gmail.com", "john@microsoft.com"]
    phone: [5497821445449, 559485556555]
}

---

[body]

是一个具有一个值的数组

{name:[…}

。您有一行5列。每个单元格都包含一个数组。您应该重新考虑您的结构。您需要类似于

body=[{name:…}，{name:…}]

在您的示例中，主体应为：

[{
    name: "amine",
    adress: "montreal",
    company: "apple",
    email: "my@gmail.com",
    phone: 5497821445449
},{
    name: "bill",
    adress: "new york",
    company: "microsoft",
    email: "john@microsoft.com",
    phone: 559485556555
}]

及

应该是

<tr v-for="(row, i) in body" :key="`row-${i}`">

---

下面是一个运行示例：

[body]

是一个具有一个值的数组

{name:[…}

。您有一行5列。每个单元格都包含一个数组。您应该重新考虑您的结构。您需要类似于

body=[{name:…}，{name:…}]

在您的示例中，主体应为：

[{
    name: "amine",
    adress: "montreal",
    company: "apple",
    email: "my@gmail.com",
    phone: 5497821445449
},{
    name: "bill",
    adress: "new york",
    company: "microsoft",
    email: "john@microsoft.com",
    phone: 559485556555
}]

及

应该是

<tr v-for="(row, i) in body" :key="`row-${i}`">

---

下面是一个运行示例：

将body变量重构为更结构化的变量 比如说

 [
   { 
      name: 'amine',
      address: 'montreal',
      company: 'apple',
      email: 'my@gmail.com',
      phone: 5497821445449
   },
   { 
      name: 'bill',
      address: 'new york',
      company: 'apple',
      email: 'john@microsoft.com',
      phone: 5497821445449
   },
 ]

---

如果愿意，可以将计算中的变量移动到计算中

将主体变量重构为更结构化的变量 比如说

 [
   { 
      name: 'amine',
      address: 'montreal',
      company: 'apple',
      email: 'my@gmail.com',
      phone: 5497821445449
   },
   { 
      name: 'bill',
      address: 'new york',
      company: 'apple',
      email: 'john@microsoft.com',
      phone: 5497821445449
   },
 ]

---

如果您不想更改对象结构，请尝试使用另一个计算属性将该对象重构为数组：

data(){
  return{
   body:{
    name: ["amine", "bill"],
    adress: ["montreal", "new york"]
    company: ["apple", "microsoft"]
    email: ["my@gmail.com", "john@microsoft.com"]
    phone: [5497821445449, 559485556555]
   }
 }
},
computed:{
  rows(){
   let _rows=[];
   let vals=Object.values(this.body);
    for(let i=0;i<2;i++){
       _rows[i]=vals.map(v=>v[i])
     }
   return _rows;

 }

}

data（）{
返回{
正文：{
名称：[“胺”，“法案”]，
地址：[“蒙特利尔”、“纽约”]
公司：[“苹果”、“微软”]
电子邮件：[”my@gmail.com", "john@microsoft.com"]
电话：[5497821445449559485556555]
}
}
},
计算：{
行（）{
设_行=[]；
设vals=Object.values（this.body）；
for（设i=0；iv[i]）
}
返回_行；
}
}

在模板中：

<tr v-for="(row, i) in rows" :key="`row-${i}`">
    <td v-for="(cell,j) in row" :key="`mfield-${j}`">
         {{cell}} -
    </td>
</tr>

{{cell}}-

如果无法更改对象结构，请尝试使用另一个计算属性将该对象重构为数组：

data(){
  return{
   body:{
    name: ["amine", "bill"],
    adress: ["montreal", "new york"]
    company: ["apple", "microsoft"]
    email: ["my@gmail.com", "john@microsoft.com"]
    phone: [5497821445449, 559485556555]
   }
 }
},
computed:{
  rows(){
   let _rows=[];
   let vals=Object.values(this.body);
    for(let i=0;i<2;i++){
       _rows[i]=vals.map(v=>v[i])
     }
   return _rows;

 }

}

data（）{
返回{
正文：{
名称：[“胺”，“法案”]，
地址：[“蒙特利尔”、“纽约”]
公司：[“苹果”、“微软”]
电子邮件：[”my@gmail.com", "john@microsoft.com"]
电话：[5497821445449559485556555]
}
}
},
计算：{
行（）{
设_行=[]；
设vals=Object.values（this.body）；
for（设i=0；iv[i]）
}
返回_行；
}
}

在模板中：

<tr v-for="(row, i) in rows" :key="`row-${i}`">
    <td v-for="(cell,j) in row" :key="`mfield-${j}`">
         {{cell}} -
    </td>
</tr>

{{cell}}-

try{{row.name[field]}@IbraHimM.Nada没有解决我要找的问题：）很好的尝试；）

[body]

是一个只有一个值的数组

{name:[…}

。你有一行有5列。每个单元格都包含一个数组。你应该重新考虑你的结构。你需要像

body=[{name:…}，{name:…}，{name:}]

@IbraHimM.Nada我想循环vertically@jabaa我应该怎么做呢？{row.name[field]}@IbraHimM.Nada没有修复我正在寻找的：）很好的尝试；）

[body]

是一个具有一个值的数组

{name:[…}

。您有一行5列。每个单元格包含一个数组。您应该重新考虑您的结构。您需要类似于

body=[{name:…}，{name:…}]

@IbraHimM.Nada的内容，我想循环vertically@jabaa请问我该怎么办