сделать индекс столбца и строки в порядке убывания в vuejs

Question

Я создал таблицу со столбцами и строками. В настоящее время ячейка (1,1) начинается с в верхнем левом углу таблицы. Как начать отсчет слева внизу?

Вот мой код:

 <table class="table">
   <tr v-for="row in rows">
        <td v-for="col in cols">
        {{ row }} - {{ col }}
       </td>
   </tr>
</table>

Смотрите полный код здесь:

https://jsfiddle.net/wpgkabue/

Answer 1

Вот простое решение. Просто измените свой код на

<table class="table">
 <tr v-for="row in rows">
    <td v-for="col in cols">
    {{ 9 - row }} - {{ col }}
   </td>
 </tr>
</table>

https://jsfiddle.net/rahmbs7u/

Answer 2

Ваш пример действительно учитывает только целое число 8. Вам нужно сосредоточиться на данных.

Я изменил ваши данные на списки (вы можете и, вероятно, будете иметь объекты позже):

data: {
    rows: [1,2,3,4,5,6,7,8],
    cols: [1,2,3,4,5,6,7,8],
}

Затем мы создаем вычисляемое свойство, которое возвращает и изменяет переменную ваших строк:

sortedRows: function() {
  return this.rows.reverse()
}

Затем внутри шаблона мы меняем строки на sortedRows:

<tr v-for="row in sortedRows">
  <td v-for="col in cols">
    {{ row }} - {{ col }}
  </td>
</tr>

Heres пример JSfiddle: https://jsfiddle.net/procoib/8u0qhy2w/