node.js - 使用 Vue.js 显示单个项目
问题描述
我有一个项目列表,其中标题是显示项目详细视图的链接。单击标题,它会正确转到 url + Id。在 Vue tolls 中,详细信息页面检索具有匹配 ID 但作为数组而不是对象的项目,并且模板不显示任何属性 - 我错过了什么?
<script>
import axios from "axios";
export default {
name: "Report",
data() {
return {
report: {}
};
},
mounted: function() {
this.getReport();
},
methods: {
getReport() {
let uri = "http://localhost:5000/api/reports/" + this.$route.params.id;
axios.get(uri).then(response => {
this.report = response.data;
});
}
}
};
</script>
模板是这样的
<template>
<v-content>
<h1>report detail page</h1>
<p>content will go here</p>-
<h3>{{ report.month }}</h3>
<pre>{{ report._id }}</pre>
</v-content>
</template>
任何意见表示赞赏
解决方案
听起来您的问题是您收到的是数组而不是对象。
您可以轻松取出封装在数组中的对象。
例如,如果我们有以下数据:
var bus1 = {passengers:10, shift:1}
var busArr = [bus1]
我们可以断言:busArr === [{passengers:10, shift:1}]
然后我们可以通过引用索引 0 来拉出 bus1:
var bus1New = busArr[0]
如果您想避免数据转换并只输出结构,您可以考虑在模板中使用 v-for。
<p v-for="val in report">
_id: {{val._id}}
<br>
month: {{val.month}}
</p>
推荐阅读
- android - 有没有办法获取 Android 上的视频帧总数?
- php - Laravel 7 __construct 中的用户数据
- ios - iOS 9 的 UNUserNotificationCenter 替代方案
- c# - Hangman string char StringBuilder
- javascript - ALT 解析错误:意外的令牌(反应)
- moqui - Moqui 实体字段类型选项布尔值
- javascript - Html画布缩放到特定区域
- laravel - 为什么我不能在 laravel 中对关系使用方法?
- python - 字段 id 需要一个数字,但得到 'ashu'
- docker - Docker容器设置理解