vue返回的数据中包含id,name,comment,怎么获取name,并将结果放在一个数组中
时间: 2024-02-23 08:01:57 浏览: 24
假设你有一个包含多个对象的数组,每个对象都有id、name和comment三个属性,可以使用map方法遍历数组,并访问每个对象的name属性来获取name的值,然后将结果放在一个新数组中,比如:
```javascript
const data = [
{ id: 1, name: '张三', comment: '这是张三的评论' },
{ id: 2, name: '李四', comment: '这是李四的评论' },
{ id: 3, name: '王五', comment: '这是王五的评论' }
];
const names = data.map(item => item.name);
```
这段代码会遍历data数组,将每个元素的name属性的值放在一个新数组names中。你可以在控制台中输出names数组来查看结果。
如果你想在模板中使用names数组,可以这样写:
```html
<template>
<div>
<div v-for="name in names" :key="name">{{ name }}</div>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{ id: 1, name: '张三', comment: '这是张三的评论' },
{ id: 2, name: '李四', comment: '这是李四的评论' },
{ id: 3, name: '王五', comment: '这是王五的评论' }
]
};
},
computed: {
names() {
return this.data.map(item => item.name);
}
}
};
</script>
```
这会在页面中显示names数组的每个元素。注意,这里使用了computed属性来定义一个计算属性names,它会在data数组发生变化时自动更新。