vue.js v-for итеративная переменная количество раз

Question

Я бы хотел перебирать строки в таблице на основе диапазона.Но все примеры, которые я видел, показывают, как сделать это для константы, например,

<div>
  <span v-for="n in 10">{{ n }} </span>
</di

Как я могу сделать это для переменной, подобной этой,

<table>
   <tr v-for="(el, index) in form.repeat" :key="index">
      <td>hello</td>
   </tr>
</table>

Эта переменнаяform.repeat устанавливается в форме на странице.

Спасибо

Answer 1

У меня была эта проблема недели, мой обходной путь для нее заключался в том, чтобы установить переменную в вашем разделе данных на количество строк, которое вы хотите.В моем случае, основываясь на количестве устройств, мой бэкэнд возвратил длину списка как часть ответа.Когда Vue получает этот ответ.Я назначаю переменную, созданную ранее в разделе данных, этому номеру и подключаю ее к циклу v-for.

В данныхраздел:

data: () => ({'num_pis': 0})

В части шаблона укажите номер.Это всего лишь фрагмент, я использую таблицу v-data из Vuetify.

<template slot="items" slot-scope="props">
  <td class="table-content-style">{{ props.item.metric_name }}</td>
  <td v-for="i in num_pis">
    {{ props.item[i] }}
  </td>
</template>

Пример Codepen