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