получить серийный номер в обратном порядке в vue js

Question

ниже - код для отображения серийного номера при переборе списка. Теперь я не могу отсортировать список по некоторым причинам, и список будет таким, как есть. но я хочу, чтобы серийный номер был напечатан в обратном порядке. Если размер массива равен 5, мне нужно 5 4 3 2 1.

<table class="table" border=1 width="650" style="word-wrap:break-word">
         <tr>
          <td colspan="6" class="heading">
            <b>Corrigendum Document Details</b>
          </td>
        </tr>
              <tr>
                <th align="center" style="width:7.5%">Corr.No.</th>
                <th align="center">Corrigendum Title</th>
                <th align="center">Corrigendum Description</th>
                <th align="center">Published Date</th>
                <th align="center">Document Name</th>
                <th align="center">Doc Size(in KB)</th>
              </tr>
              <tr v-for="(corrworkdoc,index) in corrWorkItemDocumentsAndCorrDetailList" i = index>
                <td>{{index+1}}</td>
                <td>{{corrworkdoc.corrigendumTitle}}</td>
                <td>{{corrworkdoc.corrigendumDescription}}</td>
                <td>{{corrworkdoc.publishedDate}}</td>
                <td><a href="#" v-on:click="doDownload(corrworkdoc.fileName)" title="Download" style="color:blue;">{{corrworkdoc.fileName}}</a></td>
                <td>{{corrworkdoc.docSize}}</td>
              </tr>
    </table>

как вывести серийный номер в обратном порядке.

Answer 1

Используйте вычисленное свойство и поверните массив или прямо в шаблоне, как в примере Saeed.At.Также установите правильное значение индекса.

computed: {
   reverseDetailedList() {
      return this.corrWorkItemDocumentsAndCorrDetailList.slice().reverse();
   }

И в шаблоне:

<tr v-for="(corrworkdoc,index) in reverseDetailedList" :key="index">
   <td>{{ reverseDetailList.length - index }}</td>
   <td>{{ corrworkdoc.corrigendumTitle}}</td>

Answer 2

Попробуйте это

<tr v-for="(corrworkdoc,index) in corrWorkItemDocumentsAndCorrDetailList.reverse()" i = index>
            <td>{{index+1}}</td>
            <td>{{corrworkdoc.corrigendumTitle}}</td>
            <td>{{corrworkdoc.corrigendumDescription}}</td>
            <td>{{corrworkdoc.publishedDate}}</td>
            <td><a href="#" v-on:click="doDownload(corrworkdoc.fileName)" title="Download" style="color:blue;">{{corrworkdoc.fileName}}</a></td>
            <td>{{corrworkdoc.docSize}}</td>
          </tr>