不对,数组每个值都有它自己的属性名
时间: 2024-03-20 08:45:28 浏览: 15
如果后端返回的是一个对象,每个值都有自己的属性名,那么可以使用 `Object.keys()` 方法将其转换为一个包含所有属性名的数组,然后使用 `map` 方法对数组进行遍历,将每个属性的值存储到一个新的数组中。以下是一个示例代码:
```
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
dataFromBackend: {
apple: 10,
banana: 20,
orange: 15
},
items: []
};
},
mounted() {
this.items = Object.keys(this.dataFromBackend).map(key => this.dataFromBackend[key]);
}
};
</script>
```
在上述代码中,我们首先在 `data` 中定义了 `dataFromBackend` 和 `items` 两个属性。`dataFromBackend` 存储了从后端获取到的数据,`items` 则是将其转换为数组后存储的结果。
在 `mounted` 钩子函数中,我们调用 `Object.keys()` 方法获取 `dataFromBackend` 所有属性名的数组,然后使用 `map` 方法遍历数组,将每个属性的值存储到一个新的数组中,并将结果赋值给 `items`。
最后,我们在模板中使用 `v-for` 指令遍历 `items` 数组,将每个元素渲染成一个列表项。