Javascript 用Vue包装元素

抱歉发了这么长的邮件。 在我的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>

过于具体：第一排是城市，下面一排是各自的人口

我想让每个城市的名字都在它自己的dt元素中，人口也在它的on dd元素中。我还想将v-for与一个complete元素结合使用，以便为每个城市创建一个dt和一个dd元素，因为dt和dd元素是HTML结构中dl元素的直接子元素

我希望结果是这样的：

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

无需使用，仅用于和 使用a进行迭代以通过城市。

---

这有点管用。我收到一个机器人返回的一些错误，它会检查代码的结果，以确定它不是硬编码的。它检查显示了多少个城市：错误：对于一个城市不渲染一个dt元素，不渲染ddelement希望这是有意义的。我可以发布机器人反馈的全部图片吗？

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

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