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.

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 tags.

user_670855 · Answer

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.

user_3892101 · Answer

If it's nuxt, then the answer from the documentation:

Warning: You don't have access to the component instance through this inside asyncData because it is called before initiating the component.

You need to make a method not in Vue. Something like:

async function treding(media) {
    const { data } = await axios.get('/api/v1/get/type/' + media);
    return data.list;
}

export default {
  async asyncData(context) {
    try {
      const promises = [treding('movies'), treding('series')];
      const [trendingMovies, trendingSeries] = await Promise.all(promises);
      return { trendingMovies, trendingSeries };
    } catch {
      console.log(404);
      return { trendingMovies: null, trendingSeries: null };
    }
  }
}

Or you can don't use asyncData

data() {
    return {
        trendingMovies: null,
        trendingSeries: null,
    };
},
async created() {
    try {
        const promises = [this.treding('movies'), this.treding('series')];
        const [trendingMovies, trendingSeries] = await Promise.all(promises);
        this.trendingMovies = trendingMovies;
        this.trendingSeries = trendingSeries;
    catch {
        console.log(404);
    }
},
methods: {
    async treding(media) {
        const { data } = await axios.get('/api/v1/get/type/' + media);
        return data.list;
    },
},

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

2 Answers