Vue中v-for内嵌套多v-if导致表格最后两个<td>不显示的问题

Alright, let's break down why those last two columns aren't rendering correctly—you've got a small DOM structure issue here that's throwing off the table layout, plus a data type mismatch that's compounding the problem.

The Root Problem #

First, looking at your code for the Registration and Approval columns: you're using two separate <td> tags with individual v-if checks:

<!-- Broken Registration column -->
<td v-if="item.isRegistered === '1'">Registered</td>
<td v-if="item.isRegistered === '0'">Not Registered</td>

<!-- Broken Approval column -->
<td v-if="item.isApproved === '1'">Approved</td>
<td v-if="item.isApproved === '0'">Not Approved</td>

This creates extra table cells instead of showing content in the single cell that corresponds to your header. Since your header only has one <th> per column, the browser gets confused about column counts and misplaces or hides those cells.

Second, your API returns numeric values (0/1) but your code checks against strings ('0'/'1')—those comparisons fail, so even if the DOM was correct, the content wouldn't show up!

Fixed Code #

Here's the corrected table with clean, working logic plus Vue best practices:

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Select</th>
      <th>Subject Code</th>
      <th>Subject Name</th>
      <th>Core/Elective</th>
      <th>Registration</th>
      <th>Approval</th>
    </tr>
  </thead>
  <tbody>
    <!-- Added :key for proper Vue list tracking -->
    <tr v-for="item in subjectData" :key="item.id">
      <td align="center">
        <label class="form-checkbox">
          <input type="checkbox" :value="item.subject.id" v-model="selectedOption">
          <i class="form-icon"></i>
        </label>
      </td>
      <td>{{ item.subject.subjectCode }}</td>
      <td>{{ item.subject.subjectName }}</td>
      <!-- Simplified Core/Elective check with ternary operator -->
      <td>{{ item.subject.isElective === 0 ? 'Core' : 'Elective' }}</td>
      <!-- Fixed Registration column: single td with correct numeric check -->
      <td>{{ item.isRegistered === 1 ? 'Registered' : 'Not Registered' }}</td>
      <!-- Fixed Approval column: single td with correct numeric check -->
      <td>{{ item.isApproved === 1 ? 'Approved' : 'Not Approved' }}</td>
    </tr>
  </tbody>
</table>

Key Changes Explained #

1. Merged <td> tags: Each column now uses one <td> with a ternary operator to show the right text. This keeps the table's column count matched to the header, so the browser can render cells correctly.
2. Fixed value comparisons: Swapped string checks ('0'/'1') for numeric checks (0/1) to match your API's actual response data.
3. Added :key to v-for: This is a Vue requirement for list rendering—it helps track elements correctly, avoids bugs, and boosts performance.
4. Simplified Core/Elective logic: Used a ternary operator here too to clean up redundant v-if blocks.

Why This Works #

Now each table row has exactly 6 <td> tags, matching the 6 <th> tags in the header. The browser can properly map each cell to its column, and the comparisons now match your data's type—so the Registration and Approval statuses will display as expected.

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