[Vuejs]-Multiple v-for loops to display cities within countries?

I’m not completely certain this output is what you want but it’s a place to start:

<template>
  <table>
    <tr>
      <th>Countries</th>
      <th>Cities</th>
    </tr>
    <tr v-for="country in countries" :key="country.key">
      <td>{{ country.name }}</td>
      <td v-if="areCitiesVisible(country.code)">{{ citiesInCountry(country.code) }}</td>
      <td v-else>
        <button @click="onClickCountry(country.code)">show cities</button>
      </td>
    </tr>
  </table>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      cities: [],
      countries: [],
      countriesWithVisibleCities: [],
    };
  },
  mounted() {
    axios
      .get('https://api.openaq.org/v1/cities')
      .then(response => (this.cities = response.data.results))
      .catch(console.log);

    axios
      .get('https://api.openaq.org/v1/countries')
      .then(response => (this.countries = response.data.results))
      .catch(console.log);
  },
  methods: {
    citiesInCountry(code) {
      return this.cities
        .filter(c => c.country === code)
        .map(c => c.city)
        .join(', ');
    },
    onClickCountry(code) {
      this.countriesWithVisibleCities.push(code);
    },
    areCitiesVisible(code) {
      return this.countriesWithVisibleCities.includes(code);
    },
  },
};
</script>

It renders a table with one row per country. Each row has a name and a button. If you press the button, you’ll get a list of cities instead of the button. Note that the API call seems to return only the cities for the first few counties in the list.

Other notes:

• Your original post had several typos that could have been caught with eslint. I recommend installing it along with prettier. I promise that will save you a lot of time in the future.
• I simplified the axios calls – self isn’t necessary here.