displaying post response message of vue-axios

Question

I have a function in APIService.js

createPatient(data){

    const url = 'http://192.168.1.3/api/clinic/patient/add/';
    return axios.post(url, data).then(resp => {return resp});
}

And in my vue component script tag:

result = apiService.createPatient(data);
console.log(result);

but after submitting data received from apiService.createPatient is initially pending. How can I wait and display the message of resolved Promise ?

score 2 · Accepted Answer · answered Dec 27 '18 at 15:51

2

Create a data property and then update it asynchronously:

data () {
  result: null
},
created () {
  apiService.createPatient(data).then(res => {
    this.result = res.data
  })
}

And then conditionally render your component based on whether result is populated: <some-component v-if="result">{{ result }}</some-component>

answered Dec 27 '18 at 15:51

Psidom

why in `created()` I have made a function `saveRecord` under the `methods` attribute that contains the code you put inside created ? – Ciasto piekarz Dec 27 '18 at 15:58
You don't have to use `created`. I use `created` because it's generally where you initialize your data and for demo purpose only. But if you want to load your data some time later (when an event is fired for instance), that's fine too. – Psidom Dec 27 '18 at 16:02
2

i think you should only set `return axios.post(url, data);` inside that method – Boussadjra Brahim Dec 27 '18 at 16:19

1 Answers1