vue 对象数组套对象数组,取出内层对象数组拼接在一起
时间: 2023-10-29 21:49:47 浏览: 80
可以使用`flatMap`方法来取出内层对象数组并拼接在一起。下面是一个示例代码:
```javascript
// 假设有一个对象数组
const arr = [
{ id: 1, items: [{ name: 'item1' }, { name: 'item2' }] },
{ id: 2, items: [{ name: 'item3' }, { name: 'item4' }] }
];
// 使用flatMap方法取出内层对象数组并拼接在一起
const innerArray = arr.flatMap(obj => obj.items);
console.log(innerArray);
// 输出:[{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }, { name: 'item4' }]
```
在Vue中,你可以在模板中使用computed属性,或者在方法中使用该代码来获取拼接后的内层对象数组。
相关问题
Vue在数组对象中查找值并取出
在Vue中,可以使用`Array.prototype.find()`方法来查找数组中符合条件的对象,并取出该对象的值。与上面Javascript的方法类似,不同的是在Vue中通常会将数据存储在组件的`data`属性中,因此需要使用`this`关键字来获取数组对象。假设在Vue组件中有一个数组对象`list`,其中包含多个对象,每个对象有多个属性,可以使用以下方式来查找符合条件的对象,并取出该对象的值:
```
<template>
<div>
<ul>
<li v-for="item in list" :key="item.id">{{ item.name }} - {{ item.age }}</li>
</ul>
<p>{{ name }}</p>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, name: "张三", age: 18 },
{ id: 2, name: "李四", age: 20 },
{ id: 3, name: "王五", age: 22 }
],
name: ""
}
},
mounted() {
// 查找年龄为20的对象,并取出该对象的姓名
var item = this.list.find(function(item) {
return item.age === 20;
});
this.name = item.name;
}
}
</script>
```
在上面的代码中,我们将数组对象`list`存储在组件的`data`属性中,使用`v-for`指令遍历数组对象并在页面中显示出来。在`mounted()`生命周期钩子中,使用`this.list.find()`方法查找年龄为20的对象,并将该对象赋值给变量`item`,最后使用`this.name`将该对象的`name`属性的值赋值给组件的`name`属性,用于在页面中显示出来。
vue 拼接对象数组
在 Vue 中,可以使用 `concat()` 方法来拼接两个对象数组。
示例代码:
```javascript
// 定义两个对象数组
let arr1 = [{name: '张三', age: 20}, {name: '李四', age: 22}];
let arr2 = [{name: '王五', age: 25}, {name: '赵六', age: 28}];
// 使用 concat 方法拼接两个数组
let arr3 = arr1.concat(arr2);
console.log(arr3); // 输出:[{name: '张三', age: 20}, {name: '李四', age: 22}, {name: '王五', age: 25}, {name: '赵六', age: 28}]
```
在 Vue 中,也可以使用展开运算符 `...` 来拼接对象数组。
示例代码:
```javascript
// 定义两个对象数组
let arr1 = [{name: '张三', age: 20}, {name: '李四', age: 22}];
let arr2 = [{name: '王五', age: 25}, {name: '赵六', age: 28}];
// 使用展开运算符拼接两个数组
let arr3 = [...arr1, ...arr2];
console.log(arr3); // 输出:[{name: '张三', age: 20}, {name: '李四', age: 22}, {name: '王五', age: 25}, {name: '赵六', age: 28}]
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)