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

试试这个

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

Answer 2

使用计算属性并反转数组或直接在模板中作为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>

在vue js中以相反的顺序获取序列号

2 个答案: