Ошибка при попытке вызвать константу для представления: метод не определен

#javascript #vue.js

Вопрос:

Спасибо за помощь, которую вы мне оказали…

Я пытаюсь вызвать константу в представлении, поскольку она должна возвращать значение. В этом случае в методе есть функция, которая возвращает мне строку. Это позже я собираюсь отправить его в другой вид для его вызова.

У меня есть представление, которое я вызываю 2 раза, потому что я пытаюсь напечатать 2 карусели с разной информацией.

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

В экспорте по умолчанию у меня есть это:

 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;
  },
}

То, что я пытаюсь сделать, это сохранить соответствующую строку в каждой константе, а затем передать ее в представление карусели.

Проблема в том, что я всегда получаю следующую ошибку в <app-carousel> тегах.

1. Кажется очень странным заполнение при монтировании компонента. Такие операции обычно выполняются в верхней части модуля

2. Я понятия не имею, решит ли это проблему, но обычно вы импортируете полизаполнение в свою точку входа, т.е. Main, и вызываете polyfill() .

3. попробуйте обернуть this.calculateState(this.data.length); в блоке this.nextTick(), возможно, ссылка еще не готова.

4. Я только что сделал консольный журнал. $refs.carouselElement и он выводит его мне undefined . Кто-нибудь знает почему?.

5. Спасибо за предложение. Это уже исправлено.

Ответ №1:

Вы можете попробовать провести рефакторинг asyncData со следующим подходом:

 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 };
},

Таким образом, он гарантирует, что asyncData всегда возвращает правильный объект данных.

1. Спасибо за ответ, но … он продолжает показывать мне ту же ошибку. Я пытаюсь также поместить значение let в данные, возвращающие значение null, но оно ничего не показывает.

Ответ №2:

Если это так nuxt , то ответ из документации:

Предупреждение: у вас нет доступа к экземпляру компонента через это внутри asyncData, потому что он вызывается перед инициализацией компонента.

Вам нужно создать метод не в Vue. Что-то вроде:

 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 };
    }
  }
}

Или вы можете не использовать 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;
    },
},