Vue.js 多个v-for循环以显示国家/地区内的城市？

我在visualstudiocode中使用vue.js和axios，我对基本的编码非常陌生，所以如果我的问题措词不当，我很抱歉。我使用此API组装了两个阵列： ''

一个是国家列表，包含该地区的城市数量等数据，另一个是这些国家内的城市列表，包含相应的数据。我在一个表格中显示了一个国家列表，在同一行中使用v-for循环显示了相应的按钮

我想做的是，当为数组中的每个对应国家单击此按钮时，将显示该国家/地区内的所有城市。有人告诉我这需要单独的v-for循环，但我不知道该怎么写

<template>
  <div>
  <table>
   <tr>
    <th>Countries</th>
    <th>Cities</th>
   </tr>
   <tr>
    <td>   
     <ul>
      <li v-for="countries in listofcountries" :key="countries.name">
       {{countries.name}}
      </li>
     </ul>
    </td>
     <ul  v-for="countries in listofcountries" :key="countries.name">
      <li v-for="cities in lifeofcities" :key="cities.city"></li>
       <button>{{countries.name}}</button>
      </li>
     </ul>
    </tr> 
  </table>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
 data () {
   return {
   listofcountries: [],
   listofcities: [],
   } 
  },
 mounted () {
 const axios = require('axios');
 var self = this;
// Make a request for a user with a given ID
axios.get('https://api.openaq.org/v1/cities') 
  .then(function (response) {
    // handle success
    console.log(response.data.results);
    self.listofcities=response.data.results;
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

  axios.get('https://api.openaq.org/v1/countries') 
  .then(function (response) {
    // handle success
    console.log(response.data.results) ;
    self.listofcountries=response.data.results;
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });
 },
 methods: {
   }
 }



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
ul {
  list-style-type: none;
}
table,th,td,tr {
  border: 1px solid black;
}
</style>

国家
城市


{{countries.name}




{{countries.name}


导出默认值{
名称：“HelloWorld”，
数据（）{
返回{
国家名单：[]，
城市名单：[]，
} 
},
挂载（）{
const axios=require（'axios'）；
var self=这个；
//向具有给定ID的用户发出请求
axios.get（）https://api.openaq.org/v1/cities') 
.然后（功能（响应）{
//成功
日志（响应、数据、结果）；
self.listofcities=response.data.results；
})
.catch（函数（错误）{
//处理错误
console.log（错误）；
})
.最后（函数（）{
//总是执行
});
axios.get（）https://api.openaq.org/v1/countries') 
.然后（功能（响应）{
//成功
日志（响应、数据、结果）；
self.listofcountries=response.data.results；
})
.catch（函数（错误）{
//处理错误
console.log（错误）；
})
.最后（函数（）{
//总是执行
});
},
方法：{
}
}
保险商实验室{
列表样式类型：无；
}
表，th，td，tr{
边框：1px纯黑；
}

我不能完全确定此输出是否是您想要的，但这是一个开始：

<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>

国家
城市
{{country.name}
{{citiesInCountry（country.code）}
展示城市
从“axios”导入axios；
导出默认值{
数据（）{
返回{
城市：[]，
国家：[]，
可访问城市的国家：[]，
};
},
安装的（）{
axios
.get（'https://api.openaq.org/v1/cities')
.然后（response=>（this.cities=response.data.results））
.catch（console.log）；
axios
.get（'https://api.openaq.org/v1/countries')
.然后（response=>（this.countries=response.data.results））
.catch（console.log）；
},
方法：{
城市国家（代码）{
把这个还给我。城市
.filter（c=>c.country==代码）
.map（c=>c.city）
。加入（‘，’）；
},
国家（代码）{
此.countriesWithVisibleCities.push（代码）；
},
城市是否可见（代码）{
返回此.countriesWithVisibleCities.includes（代码）；
},
},
};

它呈现一个每个国家一行的表。每行都有一个名称和一个按钮。如果你按下按钮，你会看到一个城市列表而不是按钮。注意，API调用似乎只返回列表中前几个县的城市

其他说明：

• 你原来的帖子有几个打字错误，可能是用eslint发现的。我建议把它和更漂亮的一起安装。我保证这会在将来为你节省很多时间
• 我简化了axios调用-

  self

  在这里是不必要的