1

前もって感謝します。

だから私は を介し​​てブログカテゴリのリストを取得APIし、 を使用してリストにレンダリングしていv-forます。

また、すべてのカテゴリのブログの数を取得して、カテゴリの横に配置する必要があります。

しかし、問題は、を呼び出すメソッドを呼び出していることapiです。

   <li v-for="item in sidebar" :key="item.identifier">
        <nuxt-link
          tag="a"
          :to="{
            name: 'blog-page',
            query: { category: item.identifier }
          }"
          >{{ $localize(item.translations).title }}
          {{ getBlogCount(item.identifier) }}
        </nuxt-link>
   </li>

あなたはそれがすでに例を示していることを知っていますAnimals [Object Promise]

  methods: {
    async getBlogCount(identifier) {
      axios
        .get(
          "https://example.com/posts?fields=created_at&filter[category.category_id.identifier]=" +
            identifier +
            "&meta=*"
        )
        .then(count => {
          return count.data.meta.result_count;
        });
    }
  }

この種のことを処理する最良の方法は何ですか?

4

2 に答える 2

0

HTML テンプレートではなく、スクリプトでこれを処理することをお勧めします。

できることは、サイドバーがいつ初期化されるか (おそらくマウントされたフックで) に応じて、getBlogCountメソッドを呼び出してサイドバーの各項目のブログ カウントを取得し、配列またはオブジェクトに (または個別のキー値として) 格納することです。を同じサイドバー アイテム オブジェクトとペアにする)、そのデータ構造を使用してテンプレートにカウント値を表示します。

サイドバーがマウントされたフックに取り込まれ、それがオブジェクトの配列であると仮定すると、次のことができます。

<template>
   <li v-for="item in sidebar" :key="item.identifier">
        <nuxt-link
          tag="a"
          :to="{
            name: 'blog-page',
            query: { category: item.identifier }
          }"
          >{{ $localize(item.translations).title }}
          {{ item.blogCount }}
        </nuxt-link>
   </li>
</template>

<script>
mounted () {
  // after the sidebar is populated
  this.sidebar = this.sidebar.map(async item => {
    item.blogCount = await this.getBlogCount(item.identifier)
    return item
  })
}
</script>

これがあなたを助けることを願っています

于 2020-07-20T05:50:49.570 に答える