Vuejs set 方法返回模板答案

【问题标题】：Vuejs set method return to templateVuejs set 方法返回模板
【发布时间】：2018-12-13 09:11:32
【问题描述】：

我是 Vue 的新手，我现在被困住了。为了练习，我正在为系列剧集清单制作一个应用程序。该应用程序搜索系列的第一部分并将其中一个添加到数据库中。搜索结果给了我这样的结果：https://i.stack.imgur.com/QuOfc.png

这是我的带有模板和脚本的代码：

<template>
  <div class="series">
    <ul>
      <li v-for="item in series" :key="item.id">
        <img :src="image_url+item.poster_path"/>
        <div class="info">
          {{item.name}}
          <br/>
          <h5>{{item.id}}</h5>
          Start Date: {{item.first_air_date}}
          <br/>
          {{getEpisodeNumber(item.id)}}
          <br/>
          {{getSeasonNumber(item.id)}}
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "series",
  props: ["series"],
  data() {
    return {
      image_url: "https://image.tmdb.org/t/p/w500",
      api_key: {-api key-},
      episode_url: "https://api.themoviedb.org/3/tv/",
    }
  },
  methods: {
    async getEpisodeNumber(showID) {
      const json = await fetch(this.episode_url + showID + this.api_key)
        .then((res) => { return res.json() })
        .then((res) => { return res.number_of_episodes })
      return await json
    },
    async getSeasonNumber(showID) {

      const json = await fetch(this.episode_url + showID + this.api_key)
        .then((res) => { return res.json() })
        .then((res) => { return res.number_of_seasons })
      return await json;
    }
  },
}
</script>

方法应该返回给我一个数字，但它们返回一个对象，可能是 promise 对象。但是当我尝试在方法中控制台记录数据时，它们会打印一个值（int）。我需要达到这个值，但我被困住了。我试着想了想，但每次都失败了。

【问题讨论】：

你在 console.log 中打印了什么变量？
这是不可能的，因为您使用的是异步并且它总是返回一个承诺
您最好的解决方案是创建一个子组件并在其中和子组件内部传递项目，您可以为季节和剧集编号分配数据变量，因此当您使用 fetch 时获取数据，只需要设置季号和集号的值
你为什么不简单地等待承诺？像这样： res = await fetch() json = await.json() num = json.number
@Phoenix 我打印res.number_of_episodes 和res.number_of_seasons

标签： javascript vue.js vuejs2

【解决方案1】：

我只是创建了一个名为show 的新组件并将item.id 传递给该组件。在show 组件中，我使用另一个fetch() 再次获取显示数据，现在它可以正常工作了。

【讨论】：