Reputation: 171
I have a listing page and a separate add record page (MainCreate) in where I want to post a new record to the JSON api hosted on jsonstorage extendclass.com
So this is my MainCreate.vue code (I will also give here one object so you can see the structure)
<template>
<b-container class="my-4">
<b-row>
<b-col>
<h3>Log a New Dive</h3>
</b-col>
</b-row>
<b-row>
<b-col>
<b-form id="myform" @submit.prevent="diveData" method="post">
<b-form-group id="input-group-1" label="Dive Id:" label-for="dive_id">
<b-form-input type="text" id="input-1" name="dive_id" v-model="dives.dive_id" placeholder="Enter id" ></b-form-input>
</b-form-group>
<b-form-group id="input-group-2" label="Dive Number:" label-for="dive_number">
<b-form-input type="text" id="input-2" name="dive_number" v-model="dives.dive_number" placeholder="Enter Dive #" ></b-form-input>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
</b-form>
</b-col>
</b-row>
</b-container>
</template>
const postUrl = "https://json.extendsclass.com/bin/d6af4c8c4829"; // request URL
const token = "1234"; // access token
var axiosHeaders = {
headers: {
"secret-key": token
},
};
export default {
name: "MainCreate",
data() {
return {
dives: {
dive_id: null,
dive_number: null
}
}
},
methods: {
diveData(e) {
this.axios.post(postUrl, this.dives, axiosHeaders).then((response) => {
this.dives = response.data.dives;
console.warn(response);
}, () => {
e.preventDefault();
}).catch((error) => {
console.log(error)
})
e.preventDefault();
}
},
}
I have a listing page that is working just fine and loading all the data. "get" is working fine.
What am I missing? Here is one JSON Object
{
"dives": [
{
"dive_id": 1,
"dive_number": "0001",
"dive_date": "05/22/2020",
"dive_time": {
"time_value": 55,
"time_unit": "min"
},
"dive_depth": {
"distance_value": 53,
"distance_unit": "ft"
},
"dive_type": "Reef",
"dive_note": "Some Long description here about the dive. Some Long description here about the dive Some Long description here about the dive Some Long description here about the dive Some Long description here about the dive",
"_showDetails": false,
"dive_location": {
"country": "USA",
"dive_site": "Lake Phoenix, Rawlings, Virginia"
},
"dive_site_conditions": {
"visibility": {
"distance_value": 43,
"distance_unit": "ft"
},
"air_temp": {
"temp_value": "73°",
"temp_unit": "F"
},
"surface_temp": {
"temp_value": "73°",
"temp_unit": "F"
},
"bottom_temp": {
"temp_value": "73°",
"temp_unit": "F"
},
"water_type": "Salt",
"water_access": "Shore",
"water_movement": "Surge",
"water_roughness": ""
},
"air_specs": {
"start_psi": {
"air_value": "3000",
"air_unit": "psi"
},
"end_psi": {
"air_value": "500",
"air_unit": "psi"
},
"computer_dive": "Sunto D5",
"rdp": "No",
"rebreather": "No"
},
"dive_plan": {
"pressure_g1": "A",
"s_interval": "21:00",
"pressure_g2": "G",
"safety_stop": {
"time_value": 5,
"time_unit": "min"
},
"residual": {
"rnt": "xxx",
"abt": "yyy",
"tbt": {
"time_value": 43,
"time_unit": "min"
}
},
"gas": {
"air_eanx": {
"gas_percentage": "32",
"gas_start_value": " ",
"gas_start_unit": "",
"gas_end_value": "",
"gas_end_unit": ""
},
"rebreather_o2": {
"gas_percentage": "",
"gas_start_value": " ",
"gas_start_unit": "",
"gas_end_value": "",
"gas_end_unit": ""
},
"bailout_eanx": {
"bailout_gas_percentage": "",
"gas_start_value": " ",
"gas_start_unit": "",
"gas_end_value": "",
"gas_end_unit": ""
},
"scrubber_time": {
"start_time_value": "123",
"start_time_unit": "min",
"used_time_value": "22",
"used_time_unit": "min",
"remain_time_value": "22",
"remain_time_unit": "min"
}
},
"time_in": "09:30 AM",
"time_out": "calculate",
"weight": {
"weight_value": 30,
"weight_unit": "lb"
}
},
"protection": {
"suit_type": "Dry",
"hood": "yes",
"gloves": "yes",
"boots": "yes"
}
}
]
}
Thanks for your help!
Upvotes: 0
Views: 684
Reputation: 85
I think the second parameter should be data followed by the headers
this.axios.post(postUrl,this.dives, axiosHeaders).then(response=>{
//do something
})
//this may also works
axios({
method: 'post',
postUrl,
this.dives,
axiosHeaders
});
Upvotes: 0
Reputation: 1558
I think the second argument to axios.post
is always the data you are trying to send and not the headers.
Headers is the third argument like so:
axios.post(url, data, {
headers: headers
})
.then()
.catch();
Upvotes: 1