How to generate external v-for without element?-CodePudding

i'm looking for solution for my problem. I've got 2 arrays

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

I want to render one line in table (in <tr>) like that:

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

I don't know how to render it, i'm trying to use two v-if's but I have a problem because 'v-if' has to be assigned to html element. I have tried like that (don't analyze properly of using variables, just a method of rendering):

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

but I received sth like that:

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

And it doesn't work, table won't render properly, can anybody help? How to make v-if without element?

CodePudding user response：

You don't have to use a HTML element: that's what the <template> tag is for. It is to be used as a placeholder:

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

NOTE: If you're using 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>