如何在Vue js中使用vue-meta從動態數據更新元信息？

Question

我的文章有各自的元描述。 我正在使用vue-meta來替換默認的元描述。 我嘗試使用 async 和 mount 屬性從我的 API 獲取信息，但我沒有看到頭部有任何變化，即在相應文章的元描述中。 我仍然看到Vue js設置的默認值。

這就是我所擁有的：

<script lang="ts">

import { Vue } from 'vue-property-decorator';
import VueMeta from 'vue-meta';

Vue.use(VueMeta);

export default class ArticleContent extends Vue {
  article: any | null = null;
  articlelist: any = null;
  id = 1;

  async mounted(): Promise<any> {
    this.article = this.articlelist.find((f: any) => {     <-- slug
      return f.title_slug === this.$route.params.id;
    });
    this.articlelist = await this.asyncData();
  }

  async asyncData(): Promise<any> {
    const articlelist = await this.$axios.get(             <-- call to my api
      'https://my_api...'
    );
    return articlelist.data.data;
  }

    metaInfo(): any {                                      <-- meta information
    return {
      title: 'Article',
      meta: [
        {
          hid: this.articlelist[0]._id,
          name: this.articlelist[0].productNames['en'],
          content: this.articlelist[0].metaDescription['en'],
        },
      ],
    };
  }
}
</script>

我希望得到一些幫助，謝謝！

Answer 1

嗨，而不是使用asyncData你可以使用serverPrefetch

嘗試這個

 serverPrefetch():Promise<any> {
  // this function should return Promise
   return this.$axios.get(
      'https://my_api...'
    ).then(result => {
          this.articlelist = result.data.data
      });

  }