我不能使用 v-for 垂直循环，因为我是堆栈 [英] I can't loop vertically using v-for i'm stack

问题描述

我正在使用 VueJS 处理一个小项目，我尝试遍历 body 变量，但我没有看到 <之间的名称/代码>

这是我的代码:

<td v-for=(field, j) in mappingFields":key="`mfield-${j}`">{{行[字段]}} -</td></tr>

这是我的身体变量:

<代码>{名称:[胺"，法案"]，地址:[蒙特利尔"，纽约"]公司:[苹果"、微软"]电子邮件:[[e-mail]"、[e-mail]"]电话:[5497821445449, 559485556555]}

我得到的结果:

预期结果:

解决方案

[body] 是一个数组，只有一个值 {name: [...}.您有一行 5 列.每个单元格包含一个数组.你应该重新考虑你的结构.你需要像 body = [{name: ...}, {name: ...}]

在您的示例中，正文应为:

<代码>[{名称:胺"，地址:蒙特利尔"，公司:苹果"，电子邮件:[e-mail]"，电话:5497821445449},{名称:账单"，地址:纽约"，公司:微软"，电子邮件:[e-mail]"，电话:559485556555}]

和

应该

这是一个运行示例:stackblitz

I'm working on a small project using VueJS, I try to loop over body variable but I don't see the names between <td></td>

this my code :

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

This is my body variable :

{
    name: ["amine", "bill"],
    adress: ["montreal", "new york"]
    company: ["apple", "microsoft"]
    email: ["[e-mail]", "[e-mail]"]
    phone: [5497821445449, 559485556555]
}

The result I get :

Expected result:

解决方案

[body] is an array with one value {name: [...}. You have one row with 5 columns. Each cell contains an array. You should rethink your structure. You need something like body = [{name: ...}, {name: ...}]

In your example body should be:

[{
    name: "amine",
    adress: "montreal",
    company: "apple",
    email: "[e-mail]",
    phone: [phone]
},{
    name: "bill",
    adress: "new york",
    company: "microsoft",
    email: "[e-mail]",
    phone: [phone]
}]

and

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

should be

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

Here is a running example: stackblitz

这篇关于我不能使用 v-for 垂直循环，因为我是堆栈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！