vue.js v-for迭代可变次数

Question

我想在一个范围内迭代 table 中的行。但是我见过的所有例子都展示了如何对一个常量执行此操作，例如，

<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

vue.js v-for迭代可变次数

vue.js v-for iterate variable number of times

vue.js

vuejs2

v-for