这里使用then（）而不是async/await。async/await暂停执行，直到promise被解析。then（）函数将继续执行代码，然后返回执行回调函数。
所以在你的fetch被解析之前，console.log（）就已经在运行了。然后fetch解析，但是下一次运行getCityData（）时，它使用旧值，因为新的fetch在console.log（）之前再次没有解析。
参考本文
在本例中，您可以执行以下操作

<template>
  <select v-model="selected" @change="getCityData">
    <option v-for="city in cities" :key="city.id" :value="city.id">{{ city.label }}</option>
  </select>
</template>

import cityData from "../data/songkickCityData.js"

export default {
  data() {
    return {
      cities: cityData,
      songkickData: []
    }
  },
  methods: {
    getCityData(e) {

      const songkickCityId = e.target.value

      let songkickUrl = this.getSongkickUrl(songkickCityId)      

      fetch(songkickUrl)
        .then(res => res.json())
        
        .then(data => {
         this.songkickData = data
         this.getRandomGig()})
      
      
    },
    getSongkickUrl(songkickCityId) {
      const now = new Date()
      const today = now.toISOString().slice(0, 10)
      const songkickAPIKey = 'XXXXXXXXXXXXX'
      let songkickUrl = `https://api.songkick.com/api/3.0/metro_areas/${songkickCityId}/calendar.json?min_date=${today}&apikey=${songkickAPIKey}`;

      return songkickUrl
    },
    getRandomGig() {
      
      // Here is where I want to get the data from current select value, not the previous one.
      console.log(this.songkickData)

    }
  }
}

字符串
或者切换到使用async/await

Fetch API是一个异步Web API，默认情况下，fetch（）请求在浏览器设置的时间超时。因此，在fetch（）之前调用的this.getRandomGig()方法被解析/拒绝。
您可以在fetch返回的promise中调用this.getRandomGig()，以从当前API响应中获取结果。

fetch(songkickUrl)
    .then(res => res.json())
    .then(data => { this.songkickData = data; this.getRandomGig(); })

字符串