我无法使用 v-for i'm stack 垂直循环答案

【问题标题】：I can't loop vertically using v-for i'm stack我无法使用 v-for i'm stack 垂直循环
【发布时间】：2021-03-25 09:16:30
【问题描述】：

我正在使用 VueJS 开发一个小项目，我尝试循环遍历 body variable，但我没有看到 <td></td> 之间的名称

这是我的代码：

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

我得到的结果：

预期结果：

【问题讨论】：

试试 {{row.name[field]}}
@IbraHimM.Nada 没有解决我正在寻找的东西 :) 不错的尝试 ;)
[body] 是一个具有一个值 {name: [...} 的数组。您有 5 列的一行。每个单元格包含一个数组。你应该重新考虑你的结构。你需要类似body = [{name: ...}, {name: ...}]
@IbraHimM.Nada 我想垂直循环
@jabaa 请问我该怎么办

标签： javascript vue.js

【解决方案1】：

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

 [
   { 
      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
   },
 ]

如果你愿意，可以在计算中移动变量

【讨论】：

【解决方案2】：

[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}`">

应该是

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

这是一个运行示例：stackblitz

【讨论】：

【解决方案3】：

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

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;

 }

}

在模板中：

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

【讨论】：