How do i send Post request with some values of array object to my Back-end in Vue.js

Question

I Have a vue.js model inside which I have several input fields where I am dynamic calculating some value.

What I am trying to do:

When I click on submit I want to console the data in key value pair so that I can send it to back-end, The key part is I want to do it for only those fields Having Value greater then 0

 new Vue({ el: '#app', data() { return { totalAmt: 500, paymentMode: [{ "PAYMENTCODE": "SW", "PAYMENTNAME": "Swiggy" }, { "PAYMENTCODE": "BB", "PAYMENTNAME": "uber Eats" }, { "PAYMENTCODE": "WE", "PAYMENTNAME": "Zomato" }] } }, computed: { balAmt() { // sum of inputs of paymentMode const sum = this.paymentMode.reduce((a, b) => a + (+b.Amount || 0), 0); return sum - this.totalAmt; } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div> <label>Total Amt</label> <input type="text" v-model="totalAmt"> </div> <div v-for="mode in paymentMode" :key="mode.PAYMENTCODE" class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> <label>{{mode.PAYMENTNAME}}</label> <input type="text" v-model="mode.Amount"> </div> <div> <label>Bal Amt</label> <input type="text" :value="balAmt"> </div> <button>Submit</button> </div>

I know how to do post request using axios the only thimg is how to get key value pairs which are grater then 0

On click Of submit I want to do that.

Answer 1

For this you might use axios library. Here,i add axios cdn link to your code snippet and demonstrate an example for hint.However, this will thrown an error,because the given url is not correct.

 new Vue({ el: '#app', data: { totalAmt: 500, paymentMode: [{ "PAYMENTCODE": "SW", "PAYMENTNAME": "Swiggy" }, { "PAYMENTCODE": "BB", "PAYMENTNAME": "uber Eats" }, { "PAYMENTCODE": "WE", "PAYMENTNAME": "Zomato" }] }, computed: { balAmt() { // sum of inputs of paymentMode const sum = this.paymentMode.reduce((a, b) => a + (+b.Amount || 0), 0); return sum - this.totalAmt; } }, methods:{ sendInfo(){ console.log(this.paymentMode); axios.post("/your/post/url/", { data: JSON.stringify(this.paymentMode) }) .then(response => { console.log(response); }) .catch(function(error) { console.log('please enter a correct url'); }); } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div> <label>Total Amt</label> <input type="text" v-model="totalAmt"> </div> <div v-for="mode in paymentMode" :key="mode.PAYMENTCODE" class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> <label>{{mode.PAYMENTNAME}}</label> <input type="text" v-model="mode.Amount"> </div> <div> <label>Bal Amt</label> <input type="text" :value="balAmt"> </div> <button @click="sendInfo">Submit</button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js" integrity="sha256-XmdRbTre/3RulhYk/cOBUMpYlaAp2Rpo/s556u0OIKk=" crossorigin="anonymous"></script>