How to render this in a Vue template?

Question

Vue.js

You need to get a table with the following columns:
Plan|Result|Deviation|Plan|Result|Deviation|Plan|Result|Deviation|Plan|Result|Deviation|

That is, the columns "plan", "result", "deviation" are repeated many times.
Single clear how to do:

<tr>
  <td v-for="n in 30">План</td>
</tr>

And how to make the necessary loop for my task in the Vue template?

Answer 1

data: () => ({
  columns: [ 'aaa', 'bbb', 'ccc' ],
  repeat: 5,
}),
computed: {
  repeatedColumns() {
    return Array(this.repeat).fill(this.columns).flat();
  },
},

<td v-for="n in repeatedColumns">{{ n }}</td>

Answer 2

Cycle within a cycle :)

Answer 3

I think so to output a component in a cycle :) I myself am an initial junior

and so the component is one 1 "plan", "result", "deviation" as many times as you like (but if the data is different then otherwise == the database is used in any case)

And how to make the necessary loop for my task in the Vue template?

<tr>
  <td v-for="n in 30">
//30 раз цикл запускать зачем можно по другому (я junior  <td v-for="n in 4"> )
</td>
</tr>