Search code examples
vue.jsnuxt.jsheadasyncdata

Nuxt val.replace is not a function when get asyncData from APIs

My intention is to get some data from an API, then put in the head(){} to set description and title, but it keeps telling me that val.replace is not a function.

here is my code:

async mounted() {
...await call api...
    if (resDataGetNewsInfo.return_code === 0) {
      vm.newsInfoObj = resDataGetNewsInfo.return_msg;
    } else {
      ...
    }

...

  asyncData() {
    return {
      newsInfoObj: '',
    };
  },

...

  head() {
    return {
      description: this.newsInfoObj.news_short_desc,
      meta: [
        {
          hid: 'og:title',
          property: 'og:title',
          content: this.newsInfoObj.news_title,
        },

but I get this error:

Uncaught TypeError: val.replace is not a function

Solution

  • Thats not the way to use asyncData.

    Your API call should be called inside the asyncData and then return your data