[Vue 警告]：實例上未定義屬性或方法“trendingMovies”

Question

有誰知道這個錯誤的原因或原因是什么？

我正在嘗試通過回收輪播文件將數據發送到另一個視圖以調用輪播

在我家中，我正在調用此數據，但它顯示了我已經提到的錯誤。

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

在出口默認我有這個：

mounted() {
    this.$store.dispatch("GET_HOME_LIST");
},

computed: {
  ...mapState({
    data: state => state.home.data
  }),

  MoviesUrl() {
    return { name: 'movies' };
  },

  SeriesUrl() {
    return { name: 'series' };
  },
},

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

    return { trendingMovies, trendingSeries};
  } catch {
    error({ statusCode: 504, message: 'Data not available' });
  }
},

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

當我放入掛載的調用類時，如果它在控制台中打印出我想要的內容。

mounted() {
  this.treding('movies');
},

我實際收到的是一個我稍后展示的字符串。

如果您能幫助我解決這個問題，我將不勝感激，因為我正在尋找一種方法來解決我開始獎勵的問題，但似乎有必要以另一種方式來解決這個問題。

Answer 1

那不是使用asyncData

您想獲得該特定頁面的 SEO 提升，但如果您調用一個不返回任何內容的方法，您將無法獲得它。

你也使用async但我沒有看到任何await 。 無論如何試試這個

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

    return { trendingMovies, trendingSeries};
  } catch {
    error({ statusCode: 504, message: 'Data not available' });
  }
},

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