如何在vejs中迭代数组键?

Question

我的代码:

<div class="col-lg-9 col-md-9">
<h3>Archives :</h3>
<div class="row" v-for="list in archives" :key="list.length">
<p>{{  }}</p>
</div>
</div>

服务器的数据:

{
archives: {
2023: {
1: ["3", "ABCD"]
}
}
}

期望输出:

archives: {
2023: {
1: ["3", "ABCD"]
}
}
2023: {
1: ["3", "ABCD"]
}
1: ["3", "ABCD"]
0: "3"
1: "ABCD"

我想在屏幕上显示密钥。这是我想要显示的密钥(2023和1)，我收到它作为密钥。我不知道如何迭代这个键。我还想显示值(ABCD, 3)

Answer 1

根据我的理解，您有一个存档对象，并且您希望在v-for的帮助下以递归的方式打印它们的键和值。我假设预期的输出如下所示。

输入对象:

{
archives: {
2023: {
1: ["3", "ABCD"]
}
}
}

期望输出:

2023: {
1: ["3", "ABCD"]
}
1: ["3", "ABCD"]
0: "3"
1: "ABCD"

如果我的理解是正确的，下面是现场演示:

new Vue({
el: '#app',
data: {
archives: {
2023: {
1: ["3", "ABCD"]
}
},
keysArr: []
},
mounted() {
this.iterateObject(this.archives);
},
methods: {
iterateObject(obj) {
Object.keys(obj).forEach(key => {
if (typeof obj[key] === 'object') {
this.keysArr.push({
[key]: obj[key]
});
this.iterateObject(obj[key])
} else {
this.keysArr.push({
[key]: obj[key]
});
}
})    
}
},
computed: {
Objectkeys() {
return this.keysArr
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h3>Archives :</h3>
<div class="row" v-for="(item, index) in Objectkeys" :key="index">
<pre>{{ item }}</pre>
</div>
</div>

Answer 2

可以使用Object。Keys方法，它将以数组的形式返回对象的键。在您的情况下，您可以在函数内部递归地调用它以迭代嵌套对象

const getKeys = (obj) => {
Object.keys(obj).forEach((key) => {
//
if (type obj[key] == "object") {
getKeys(obj[keys])
}
})
}