在vue中如何将在页面获取的对象,对象中的一个属性提出来并打包成数组,传入后台
时间: 2024-03-22 08:40:57 浏览: 197
在Vue中,可以通过以下步骤将获取的对象中的一个属性提取出来并打包成数组,然后传递给后台:
1. 在页面中获取对象,假设对象名为dataObj。
2. 创建一个空数组,用于存储提取的属性值,假设数组名为dataArray。
3. 使用for...in循环遍历对象,提取指定属性的值,并将值存入dataArray数组中。
4. 在使用axios或其他类似库的方法将dataArray数组传递给后台。
以下是一个示例代码:
```
<template>
<div>
<!-- 页面中获取的对象 -->
<div v-for="(dataObj, index) in dataList" :key="index">
<span>{{ dataObj.name }}</span>
<span>{{ dataObj.age }}</span>
</div>
<button @click="submitData">提交数据</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
dataList: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 },
],
};
},
methods: {
submitData() {
let dataArray = [];
for (let dataObj of this.dataList) {
dataArray.push(dataObj.name);
}
axios.post('/api/submitData', { data: dataArray })
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
},
},
};
</script>
```
在上面的代码中,我们通过for...of循环遍历this.dataList数组,提取每个对象的name属性,并将其存入dataArray数组中。最后使用axios将dataArray传递给后台。
阅读全文