如何将for循环项发送到方法

Question

我试图将AlumbId附加到图像src标记。我发现我需要使用一种方法来使用链接并将其发回。我不确定这是否是最好的方法，但我的工作正常，但由于某种原因，该方法将AlumbId作为'undefined'发送，所以我没有得到图像。

<template>
<div id="tracks">
  <div id="track"  v-for="track in tracks" :key='track.id'>
    <img class="cover" :src="getAlbumImg(track.albumId)" />
    <div class=content-name>{{track.albumName}}</div>
    <div class="artist-name">{{track.artistName}}</div>
    <audio controls class= "audio">
      <source type="audio/mpeg">
    </audio>

  </div>
</div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'Tracks',
  data () {
    return {
      tracks: []
    }
  },
  created() {
    axios.get('http://api.napster.com/v2.2/tracks/top?apikey=YTkxZTRhNzAtODdlNy00ZjMzLTg0MWItOTc0NmZmNjU4Yzk4')
    .then(response => {
      // JSON responses are automatically parsed.
      this.tracks = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  },
  methods: {
    getAlbumImg: function(albumId) {
      return 'http://direct.rhapsody.com/imageserver/v2/albums/' + albumId + '/images/300x300.jpg';
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Answer 1

我注意到我试图使用对象轨道而不是对象内的数组。