Javascript Vuejs集合方法返回到模板

我是Vue的新手，现在我被卡住了。为了便于练习，我正在为该系列制作一个情节清单应用程序。应用程序搜索系列的第一部分，并将其中一个添加到数据库中。搜索结果给我的结果如下：

以下是我的模板和脚本代码：

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

{{item.name}


{{item.id}
开始日期：{item.first\u air\u Date}


{{geteposodenumber（item.id）}


{{getSeasonNumber（item.id）}


导出默认值{
名称：“系列”，
道具：[“系列”]，
数据（）{
返回{
图像\u url:“https://image.tmdb.org/t/p/w500",
api_键：{-api键-}，
插曲(网址):https://api.themoviedb.org/3/tv/",
}
},
方法：{
异步GetEpioseNumber（showID）{
const json=wait fetch（this.eption\u url+showID+this.api\u键）
.then（（res）=>{return res.json（）}）
.then（（res）=>{return res.number_of_集}）
返回等待json
},
异步获取季节编号（showID）{
const json=wait fetch（this.eption\u url+showID+this.api\u键）
.then（（res）=>{return res.json（）}）
.then（（res）=>{return res.number_of_seasures}）
返回等待json；
}
},
}

---

方法应该向我返回一个数字，但它们返回一个对象，可能是promise对象。但是当我尝试在方法中记录console.log数据时，它们会打印一个值（int）。我需要达到这个值，但我被卡住了。我尝试了一些思考，但每次都失败了。

我只是创建了一个名为

show

的新组件，并将

item.id

传递给该组件。在

show

组件中，我使用另一个

fetch（）

再次获取show数据，现在它可以按照我的要求工作。

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

res.number\u集

和

res.number\u季