试图显示数据，但代码工作不正常

Question

我正在使用vue显示数据，这是我的html

<div v-for="item in secondary">
<span class="label">
{{ item.label}}
</span>
<span class="value">
{{ item.value }}
</span>
</div>

现在我已经计算好了：

computed : {
secondary() {
return this.fetchData;
} 
}

在我的方法中，我有这个

async fetchData() {
await this.fetchDetails().then((res) => {
const sItems = [];

Object.entries(res).forEach(([key, val]) => {
if (key.startsWith('s'))
sItems.push({ label: key, value: val });
});
return sItems;
});
},

下面是我遇到的一些问题，当我循环这些值时，我的数据不可见，我可以看到对API的调用，它会返回数据

{"secondaryName":"","secondaryInstitution":"","secondaryNumber":"","secondaryNumber":""}

我做错了什么

Answer 1

试试这个：

new Vue({
el: '#app',
data: {
secondary: null
},
mounted() {
this.invokeAPI();
},
methods: {
invokeAPI() {
// I am assigning the response directly but you can do it by making an API call
const res = {"secondaryName":"","secondaryInstitution":"","secondaryNumber":"","secondaryNumber":""};
const sItems = [];
Object.entries(res).forEach(([key, val]) => {
if (key.startsWith('s'))
sItems.push({ label: key, value: val });
});
this.secondary = sItems;
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(item, index) in secondary" :key="index">
<span class="label">
{{ item.label}}
</span>
<span class="value">
{{ item.value }}
</span>
</div>
</div>