Vue Как разделить таблицу кнопок forl oop на разные строки в таблице

Question

С помощью для l oop в моей первой строке таблицы создается 5 кнопок с разными значениями. Я хотел бы знать, как я могу отделить эти кнопки, например, чтобы вторая кнопка появилась во второй <tr> вместо кнопки 2. И следующий должен появиться в третьем <tr> для замены button3.

Если кнопка отдельная, нужно ли переписывать @click in ever button? Спасибо.

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

Я не хочу использовать для l oop при <tr>, как это, что заставит меня не может настраиваться для каждой строки таблицы, потому что у меня есть другие специфические c данные для каждой строки.

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

Answer 1

Вам необходимо установить v-for на tr, если вы хотите повторить этот элемент:

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