vue 动态修改后端请求_如何从vue对象动态提取数据以向后端发送POST请求?

本文档描述了如何从包含getter和setter的Vue对象中提取数据到一个纯JavaScript对象。通过使用`Object.entries`遍历Vue对象及其嵌套对象,将键值对重新分配到新的一维数组中。这种方法适用于处理不同结构的数据,为发送AJAX请求做准备。
摘要由CSDN通过智能技术生成

I have a vue object with all these getters and setters, here is a screenshot from the console.log:

The structure of the actual DATA (the not-vue stuff) looks like this:

{

Internal_key: "TESTKEY_1",

extensiontable_itc: {

description_itc: "EXTENSION_ITC_1_1",

description_itc2: "EXTENSION_ITC_1_2",

},

extensiontable_sysops: {

description_sysops: "EXTENSION_SYSOPS_1"

}

}

The data might look different in other usecases.

There might be more or less key-value pairs on the outer object, and the keys might be named differently as well. Same goes for the nested objects and their contents.

Is there some convenient way to extract this data into a plain JS Object?

If not, how can I best loop the vue object to extract the data "manually"?

The AJAX request shall be performed by an axios request, if this is important as well.

EDIT:

Here is the relevant data in vue:

data() {

return {

editingRecord: {

original: null,

copy: null

}

}

}

During my programflow, both editingRecord.orginal and editingRecord.copy receive data from an inputform. copy sets its data to original if the user clicks the save/send button. Then, I want to take the data from editingRecord.original with both its keys and values and send them to the server via AJAX request.

解决方案

Okay, I found the solution.

let vueObject = Object.entries(this.editingRecord.original)

for(const[key, value] of vueObject){

if(typeof value == 'object' && value !== null){

for(const [nestedKey, nestedValue] of Object.entries(value)){

result[nestedKey] = nestedValue

}

}else{

result[key] = value

}

}

console.log("resultObject is", result)

This way you can iterate over all properties including the properties of nested objects and reassign both key and value to a fresh, one-dimensional array.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值