Vue如何将for循环按钮表分成表中的不同行

Question

在我的第一个表格行中使用 for 循环，它创建了 5 个具有不同值的按钮。我想知道如何分离这些按钮，比如让第二个按钮出现在第二个<tr> 中以替换 button2。下一个出现在第三个<tr> 以替换button3。

如果按钮是单独的，我是否需要在任何按钮中重写@click？谢谢。

          <tr>
            <td>
            <button
              :key="trend.Trends"
              v-for="trend in topThreeTrends"
              @click="LoadTrend(trend.Trends, trend.DT)"
            >{{trend.Trends}}</button>
            </td>
          </tr>


          <tr>
            <td>
              <button @click="currentBreed = 2">button2</button>
            </td>
          </tr>


          <tr>
            <td>
              <button @click="currentBreed = 3">button3</button>
            </td>
          </tr>

我不想像这样在<tr> 使用 for 循环，这将使我无法对每个表格行进行自定义，因为我每行都有其他特定数据。

<tr
    :key="trend.Trends"
    v-for="trend in topThreeTrends">
  <td>
      <button @click="LoadTrend(trend.Trends, trend.DT)">{{trend.Trends}}</button>
  </td>
</tr>

Answer 1

如果这是您要重复的元素，则需要在 tr 上设置 v-for：

<tr
    :key="trend.Trends"
    v-for="trend in topThreeTrends">
  <td>
      <button @click="LoadTrend(trend.Trends, trend.DT)">{{trend.Trends}}</button>
  </td>
</tr>