vue.js v-用于迭代可变次数

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

在模板部分中，引用编号。这只是一个片段，我正在使用Vuetify中的v-data-table。

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