javascript - Vuejs set 方法返回模板
问题描述
我是 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)。我需要达到这个值,但我被困住了。我试着思考了一下,但每次都失败了。
解决方案
我只是创建了一个名为show
并传递item.id
给该组件的新组件。在show
组件中,我使用另一个fetch()
来再次获取显示数据,现在它可以像我想要的那样工作。
推荐阅读
- spring - 非授权账户的有效路由命名
- python - 没有指定 self 的 Python 类记录属性?
- cloud-init - 云初始化如何工作?
- vue.js - 如何在 vue 模板中使用 `console.log` 或 `console.error`?
- c# - 使部分表格单元格文本加粗 C# asp.net
- excel - 将值范围粘贴到其他工作表
- python - 如何在 Python 中删除目录中指定数量的文件?
- c# - 通过有效的 xpath 在 XmlDocument.SelectSingleNode 上返回 Null(尝试了旧答案)
- asp.net-mvc - HttpPost 方法解析错误的值(ASP.Net)
- c# - 检测 SplitContainer 的选择面板