在ajax请求之后，Vuejs类不会更新

Question

我要做的是在创建或装载组件后突出显示表格行。 playingTrack值正在更改为当前歌曲的id，但该类不会更改。 @click函数工作并更改类以突出显示，但我想要的是在安装组件时从playTrack变量获取其值。

<tr :class="{highlight:track.id == playingTrack}" @click="playingTrack = track.id" v-for="track in tracks">
    <td class="align-middle">
      {{track.title}} <br> <span style="color: grey;">{{track.artist}}</span>
    </td>
</tr>

<script>
  export default{
    data(){
        return{
            tracks:{},
            album:{},
            playingTrack: undefined
        }
    },
    beforeCreate(){
        Event.$emit('requestCurrentTrack');
        Event.$on('currentTrack', (data) => this.fetchAlbum(data));
    },
    methods:{
        fetchAlbum(data){
            axios.get('/api/album/'+this.id).then((response)=>{
                if(data){
                    this.playingTrack = data.id;
                }
                this.tracks = response.data[0];
                this.album = response.data[1][0];
            });
        }
    }
  }
</script>

Answer 1

您可以使用＆＃34; Computed Property＆＃34;

https://vuejs.org/v2/guide/computed.html

这是精心编写的文档。