Error when trying to call a constant to a view: the method is not defined

Question

Thanks for the help you have given me...

I'm trying to call a constant on view since it's supposed to return a value. In this case in the method, there is a function that returns me a string. That later I'm going to send him to another sight for his call.

I have a view that I call 2 times because I try to print 2 carousels with different information.

<app-carousel v-if="trendingMovies" :title="$t('home.new_movies')" :view-all-url="MoviesUrl" :data="trendingMovies"></app-carousel>
<app-carousel v-if="trendingSeries" :title="$t('home.new_tv_series')" :view-all-url="SeriesUrl" :data="trendingSeries"></app-carousel>

In the export default I have this:

async asyncData () {
  try {
    const trendingMovies = await this.treding('movies');
    const trendingSeries = await this.treding('series');

    return { trendingMovies, trendingSeries };
  } catch {
    console.log(404);
  }
},


methods: {
  async treding(media) {
    let { data } = await axios.get('/api/v1/get/type/' + media);
    return await data.list;
  },
}

What I am trying to do is store its respective string in each constant and then pass it to the carousel view.

The problem is that I always get the following error in the <app-carousel> tags.

Answer 1

You can try refactoring the asyncData with the following approach:

async asyncData () {
  let trendingMovies = null;
  let trendingSeries = null;
  try {
    trendingMovies = await this.treding('movies');
    trendingSeries = await this.treding('series');
  } catch {
    console.log(404);
  }
  return { trendingMovies, trendingSeries };
},

This way, it makes sure that asyncData always returns the correct data object.