我有一个Mongoose模式，它在这样的混合类型数组中记录一个key：value对：
猫鼬
const budgetSchema = new Schema({
earnings: Number,
expenses: [mongoose.Schema.Types.Mixed]
});
bugdet:{
earning:1000,
expenses: [
{shopping: 300},{bills:700}
]
}
在Vue.js中，我使用Axios请求数据，并且工作正常，但是当我显示支出属性时，它显示为{shopping：300}。
Vue js
<template>
<div class="about">
<h1>My Budget</h1>
{{ myExpenses }}
</div>
</template>
<script>
import axios from "axios"
export default {
name: "myBudget",
data() {
return{
myExpenses:[]
}
},
methods: {},
mounted(){
axios.get("http://localhost:3000/budget",{
headers:{"Content-Type": "application/json"},
withCredentials: true
}).then(res =>{
this.myExpenses = res.data.budget[0].expenses[0]
})
}
};
</script>
我想分别显示“费用”数据的键和值。有什么方法可以提取对象？
似乎您已经很好地处理了axios，根据我对问题的解释，您实际上是在尝试访问axios返回给您的数据。下面的示例不使用axios，但是假设data方法中的静态数据与您已经从axios中检索的相同。但是我确实注意到了关于数据的一件事，即您仅获取了expenses的第一个索引。您可能需要执行this.myExpenses = res.data.budget[0].expenses之类的操作，该操作将返回整个支出清单，而不仅仅是第一个值。
这是我认为您正在尝试做的事情：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<h1>My Budget</h1>
<div v-for="expense in myExpenses">
<div>Name:{{ Object.keys(expense)[0] }}</div>
<div>Total:{{ Object.values(expense)[0] }}</div>
<hr />
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
myExpenses: [{ shopping: 300 }, { bills: 700 }]
}
});
</script>
</html>
但是，我建议更改架构以返回看起来像这样的对象
{ name: 'shopping', total: 300 }
此模式更有效地使用对象的结构来指定其字段的名称及其关联的值。它还可以让您做更多这样的事情：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<h1>My Budget</h1>
<div v-for="expense in myExpenses">
<div>Name:{{ expense.name }}</div>
<div>Total:{{ expense.total }}</div>
<hr />
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
myExpenses: [
{ name: 'shopping', total: 300 },
{ name: 'bills', total: 700 }
]
}
});
</script>
</html>
您可以使用解构：
const {
data: {
budget: [firstElement]
}
} = res;
并使用等于firstElement的res.data.budget[0]变量；