使用XML2JS从Nuxt中的API解析XML

问题描述

我正在尝试使用XML2JS在nuxt中遍历API，然后遍历数据以在html文件中显示它。

当控制台登录时，它可以工作，但是不能在HTML中循环。那里没有任何错误，只是空白，没有在html中显示任何内容。

    <template>
  <article>

<TheHeader />

    <h1>Destinations</h1>

  <main class="mt-8 mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-20 xl:mt-24">


<section v-for="(mountain,index) in mountains" :key="index">

<div v-for="category in mountain.property" :key="category.id">


      <div class="lg:grid lg:grid-cols-12 lg:gap-8 mt-12">
        <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
          <h2 class="mt-1 text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:leading-none sm:text-6xl lg:text-5xl xl:text-6xl">
            {{ category.propertyname }}
          </h2>
          <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
            {{ category.propertyaddress }}
          </p>
        </div>
        <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
          <div class="relative mx-auto w-full rounded-lg shadow-lg">
            <button type="button" class="relative block w-full rounded-lg overflow-hidden focus:outline-none focus:shadow-outline">
              <img class="w-full" :src="category.photos.img.main._url" :alt="category.photos.img.caption">
              <div class="absolute inset-0 w-full h-full flex items-center justify-center">
              </div>
            </button>
          </div>
        </div>
      </div>

</div>
</section>

    </main>

  </article>
</template>

<script>


const xml2js = require('xml2js');

  export default {
    data() {
      return {
        mountains: []
      }
    },async fetch() {
      this.mountains = await fetch('http://localhost:3000/api/')
      .then( res => res.text() )
      .then( data=> {

          const xml = data;

          xml2js.parseString(xml,(err,result) => {
              if(err) {
                  throw err;
              }

              const output = JSON.stringify(result,null,4);

              console.log(output);
          });

      })
    }

  }
</script>

JSON：

{
"scdata": {
    "property": [
        {
            "propertycode": "123456"

任何帮助将不胜感激，如果您需要我提供更多信息，请告诉我。

谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）