Vue.js中遍历列表时倒序显示序号的实现方案

Got it, let's fix this. You need to keep your original list in its current order, but display the serial numbers in reverse (like 5,4,3,2,1 for a 5-item list) — no sorting the array itself, right? Here's how to pull this off in Vue.js:

The Core Idea #

Instead of reordering your data array, we'll calculate the reverse serial number dynamically using the array's total length and the current item's index in the loop. For any item at index i in an array of length N, the reverse number will be N - i.

Modified Table Code #

Here's your updated table with the Vue directives and reverse serial number logic included. I'll assume your data array is named corrigendumDocs — just swap that out with your actual array name if needed:

<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%">Corrigendum No.</th>
    <!-- Add your remaining table headers here -->
    <th align="center">Document Title</th>
    <th align="center">Issue Date</th>
    <!-- ... rest of your header columns -->
  </tr>
  <!-- Loop through the list while preserving original order -->
  <tr v-for="(doc, index) in corrigendumDocs" :key="doc.id"> <!-- Replace doc.id with your unique item identifier -->
    <!-- Dynamically compute reverse serial number -->
    <td align="center">{{ corrigendumDocs.length - index }}</td>
    <!-- Render your document data fields -->
    <td>{{ doc.title }}</td>
    <td>{{ doc.issueDate }}</td>
    <!-- ... rest of your data columns -->
  </tr>
</table>

Quick Tips #

• Reactivity first: If your array’s length changes (items added/removed), the serial numbers will automatically update to match the new reverse order — no extra code required.
• Unique :key: Always include a unique key in your v-for loop (like doc.id) to help Vue track list items efficiently and avoid rendering bugs.
• Vue version compatibility: This syntax works seamlessly for both Vue 2 and Vue 3, so no adjustments needed based on your setup.

That's all! Your list stays in its original sequence, and the serial numbers display in reverse exactly as you need.

内容的提问来源于stack exchange，提问作者raja sekhar