如何在没有元素的情况下生成外部 v-for？

Posted 2023-02-22

【中文标题】如何在没有元素的情况下生成外部 v-for？

【英文标题】：How to generate external v-for without element?

【发布时间】：2021-11-25 05:08:45

【问题描述】：

我正在为我的问题寻找解决方案。 我有 2 个数组

a = [1, 2, 3, 4];
b = ['a', 'b', 'c', 'd'];

我想像这样在表格（<tr>）中呈现一行：

<tr>
    <td><input name="c[0][0]" value="1a"></td>
    <td><input name="c[0][1]" value="1b"></td>
    <td><input name="c[0][2]" value="1c"></td>
    <td><input name="c[0][3]" value="1d"></td>
    <td><input name="c[1][0]" value="2a"></td>
    <td><input name="c[1][1]" value="2b"></td>
    <td><input name="c[1][2]" value="2c"></td>
    <td><input name="c[1][3]" value="2d"></td>
    <td><input name="c[2][0]" value="3a"></td>
    <td><input name="c[2][1]" value="3b"></td>
    <td><input name="c[2][2]" value="3c"></td>
    <td><input name="c[2][3]" value="3d"></td>
    <td><input name="c[3][0]" value="4a"></td>
    <td><input name="c[3][1]" value="4b"></td>
    <td><input name="c[3][2]" value="4c"></td>
    <td><input name="c[3][3]" value="4d"></td>
</tr>

我不知道如何渲染它，我正在尝试使用两个 v-if，但我遇到了一个问题，因为必须将“v-if”分配给 html 元素。我试过这样（不要正确分析使用变量，只是一种渲染方法）：

                <span v-for="(a_element, i) in a" :key="i">
                    <td v-for="(b_element, j) in b" :key="j">
                        <input name="`$'c['+i+']['+j+']'`" model="c[i][j]">
                    </td>
                </span>

但我收到了这样的东西：

<tr>
    <span>
    <td><input name="c[0][0]" value="1a"></td>
    <td><input name="c[0][1]" value="1b"></td>
    <td><input name="c[0][2]" value="1c"></td>
    <td><input name="c[0][3]" value="1d"></td>
    </span>
    <span>
    <td><input name="c[1][0]" value="2a"></td>
    <td><input name="c[1][1]" value="2b"></td>
    <td><input name="c[1][2]" value="2c"></td>
    <td><input name="c[1][3]" value="2d"></td>
    </span>
    <span>
    <td><input name="c[2][0]" value="3a"></td>
    <td><input name="c[2][1]" value="3b"></td>
    <td><input name="c[2][2]" value="3c"></td>
    <td><input name="c[2][3]" value="3d"></td>
    </span>
    <span>
    <td><input name="c[3][0]" value="4a"></td>
    <td><input name="c[3][1]" value="4b"></td>
    <td><input name="c[3][2]" value="4c"></td>
    <td><input name="c[3][3]" value="4d"></td>
    </span>
</tr>

它不起作用，表格无法正确渲染，有人可以帮忙吗？如何制作没有元素的 v-if？

【参考方案1】：

您不必使用 HTML 元素：这就是 <template> 标记的用途。它被用作占位符：

<template v-for="(a_element, i) in a">
    <td v-for="(b_element, j) in b" :key="j">
        <input name="`$'c['+i+']['+j+']'`" model="c[i][j]">
    </td>
</template>

注意：如果您使用的是 Vue3，remember to add a key for your <template> placeholder tag：

<template v-for="(a_element, i) in a" :key="i">
    <td v-for="(b_element, j) in b" :key="j">
        <input name="`$'c['+i+']['+j+']'`" model="c[i][j]">
    </td>
</template>