javascript - 如何在Vue js中为我的head对象使用异步功能？(How can I use the async function for my head object in Vue js?)

Question

I have to display dynamic meta descriptions for my articles and I am kind of struggling to achieve that with the async function for my head object.

(我必须为我的文章显示动态的元描述，而我要用我的head对象的async函数来实现这一点很困难。)

This is what I have so far:

(这是我到目前为止的内容：)

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component

export default class ArticleContent extends Vue {
  article: any | null = null;
  articlelist = example.data;

  async asyncData({params: any }) { <----- Not sure how I could put in my articlelist here
    return this.articlelist;
  }

  head(): object {
    return {
      title: this.articlelist.productId.productNames['en'],
      meta: [
        {
          hid: this.articlelist._id,
          name: this.articlelist.productNames['en'],
          content: this.articlelist.metaDescription['en'],
        },
      ],
    };
  }
}
</script>

articlelist is what I am using in the head() object for my meta description.

(articlelist是我在head()对象中使用的元描述。)

Would appreciate some help!

(希望能有所帮助！)

  ask by AlyssaAlex translate from so

Answer 1

Both the head() and asyncData() properties are not part of the core of vue,

(head()和asyncData()属性都不是vue核心的一部分，)

• to use head() you need to install this as a plugin

  (用head()您需要安装此作为一个插件)

• to use asyncData() you have to use nuxt

  (要使用asyncData()您必须使用nuxt)

If your spa has a strong need for seo I suggest you use nuxt, which natively includes seo and the conversion from vue to nuxt is very easy

(如果您的水疗中心对seo有强烈需求，建议您使用nuxt，它本身包含seo，从vue到nuxt的转换非常容易)

If you already using nuxt this is the correct way to get

(如果您已经在使用nuxt，则这是获取的正确方法)

async asyncData({params: any }) { 
 const articlelist = await axios.get('some.url'); //get the data
 return { articlelist }; //this object is merged with the data of the istance

}

(})