Vue.js问题：Ajax请求后类名不更新，组件挂载时无法高亮表格行

It sounds like your class binding works perfectly when clicking rows, but isn’t kicking in automatically when the component first loads—even though playingTrack is already set to the correct song ID. Let’s break down the most common fixes for this issue:

1. Check for Type Mismatch Between track.id and playingTrack #

This is the #1 culprit for this kind of problem. If track.id is a number (e.g., 123) but playingTrack is stored as a string (e.g., "123"), the loose equality check (==) might fail or behave unpredictably.

Fix this by ensuring both values are the same type:

• Convert playingTrack to a number when initializing it (if track.id is numeric):

  data() {
    return {
      playingTrack: Number(initialTrackId) // Use parseInt/parseFloat if needed
    }
  }
  

• Or use strict equality with type conversion directly in the class binding:

  <tr :class="{highlight: String(track.id) === String(playingTrack)}" ...>
  

2. Ensure Tracks Are Loaded Before playingTrack is Evaluated #

If your tracks data is fetched asynchronously (e.g., from an API in mounted() or created()), the initial render might happen before the tracks are available. Even though playingTrack is set, there are no rows to apply the highlight to yet.

To fix this:

• Set playingTrack after the tracks have finished loading (e.g., inside the API’s .then() block).
• Or add a watcher to trigger a re-evaluation once tracks are ready:

  watch: {
    tracks(newTracks) {
      // Force a reactivity refresh to ensure the class binding updates
      this.playingTrack = this.playingTrack;
    }
  }
  

3. Verify Reactivity of playingTrack #

Double-check that playingTrack is properly declared as a reactive property:

• In Vue 2: It must be included in the data() object.
• In Vue 3: It should be declared with ref() or reactive().

If it’s not reactive, changes (including the initial value) won’t trigger updates to the template.

4. Force a Re-Render (Last Resort) #

If none of the above work, you can force the table rows to re-render when the component mounts by adding a dynamic key that depends on playingTrack:

<tr :key="`track-${track.id}-${playingTrack}`" :class="{highlight: track.id == playingTrack}" ...>

This ensures that whenever playingTrack changes (including on initial mount), the row component re-renders and applies the correct class.

Quick Debug Test #

To confirm if a type mismatch is the issue, add a temporary debug line to your template:

<tr :class="{highlight: track.id == playingTrack}" @click="playingTrack = track.id" v-for="track in tracks">
  <td>{{ track.id }} | {{ typeof track.id }} | {{ playingTrack }} | {{ typeof playingTrack }}</td>
  <!-- Rest of your table cells -->
</tr>

This will show you the values and their types side by side—if they don’t match, that’s your fix!

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