Javascript Vue如何将forloop按钮表拆分为表中的不同行

由于for循环位于我的第一个表行中，它创建了5个具有不同值的按钮。我想知道如何分离这些按钮，例如使第二个按钮出现在第二个

中以替换按钮2。下一个出现在第三个

中以替换按钮3

如果按钮是单独的，我是否需要重写@click-in-ever按钮？多谢各位

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

{{trend.Trends}
按钮2
按钮3

我不想像这样在

处使用for循环，这将使我无法对每个表行进行自定义，因为每行都有其他特定的数据

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

{{trend.Trends}

如果要重复该元素，则需要在

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>

{{trend.Trends}

因此，通过这种方式，我不能对特定行进行修改，因为它必须是相同的？您可以使用

v-if

对需要修改的任何行的按钮设置一个条件