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

Question

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

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

我想在 table（在 <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>

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

Answer 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>

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

How to generate external v-for without element?

arrays

multidimensional-array

vue.js

v-for