多个 v-for 循环显示国家/地区内的城市？答案

【问题标题】：Multiple v-for loops to display cities within countries?多个 v-for 循环显示国家/地区内的城市？
【发布时间】：2020-01-05 15:01:16
【问题描述】：

我在 visualstudiocode 中使用 vue.js 和 axios 原则上我对编码非常陌生，所以如果我的问题措辞不当，我很抱歉。我有两个从这个 API 组装的数组： 'https://docs.openaq.org/#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>

【问题讨论】：

标签： vue.js v-for

【解决方案1】：

我不完全确定这个输出是你想要的，但它是一个开始的地方：

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

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

其他说明：

您的原始帖子有几个拼写错误，可能会被 eslint 捕获。我建议将它与 prettier 一起安装。我保证这将在未来为您节省大量时间。
我简化了 axios 调用 - 这里不需要 self。

【讨论】：