Обертывание элементов Vue

Question

Извините за длинный пост. В моем коде vue я получаю города из API.

new Vue({
  data: {
    cities: []
  },
  el: '#app',
  methods: {
    fetchCities() {
      fetch('https://fakeapi.app/cities/')
        .then(response => response.json())
        .then(result => {
          this.cities = result
          console.log(result)

        })
    }
  }
})

... Используя этот код HTML:

<div id="app">
      <dl>
        <dt>
          <li v-for="city in cities">{{ city.name }}</li>
        </dt>
        <dd>
          <li v-for="city in cities">{{ city.population }}</li>
        </dd>
    </dl>
      <input @click="fetchCities" type="button" value="Get cities">
    </div>

, который дает:

Stockholm
Göteborg
Malmö
Uppsala
Västerås
Örebro
Linköping
Helsingborg
Jönköping
Norrköping
   • 1372565
   • 549839
   • 280415
   • 140454
   • 110877
   • 107038
   • 104232
   • 97122
   • 89396
   • 87247

Для уточнения c: первая строка - это города, а нижняя строка - их соответствующее население.

Я хочу сделать так, чтобы название каждого города находилось в собственном dt -элементе, а население также находилось в этом dd -элементе. Я также хочу использовать v-for в сочетании с templete -элементом, чтобы создать dt и dd -элементы для каждого города, так как элементы dt и dd прямые дочерние элементы элемента dl в структуре HTML.

Я хочу, чтобы результат выглядел примерно так:

Stockholm
• 1372565
Göteborg
• 549839
Malmö
• 280415
Uppsala
• 140454
Västerås
• 110877
Örebro
• 107038
Linköping
• 104232
Helsingborg
• 97122
Jönköping
• 89396
Norrköping
• 87247

Answer 1

• Не нужно использовать <li>, это только для <ol> и <ul>
• Итерируйте с помощью <template>, чтобы пройти через города.

<div id="app">
  <dl>
    <template v-for="city in cities">
      <dt :key="city.name">{{ city.name }}</dt>
      <dd :key="`${city.name}-pop`">{{ city.population}}</dd>
    </template>
  </dl>
  <input @click="fetchCities" type="button" value="Get cities">
</div>