Updating array afte doing a post request - spring

Question

it's my first time working with Vue and I'm trying to make a simple crud using Spring as backend. My problem is that when I send the actor with the post request, and I try to make a get request to get the new actors list, it doesn't get updated until I refresh the page.
This is part of the html that I want to display. Just a form and the list of actors that I bring from my DB.
<v-flex>
<v-text-field
v-model="newActor.firstName"
label="Nombre"
prepend-icon="person"
></v-text-field>
</v-flex>
<v-flex>
<v-text-field class="ml-5"
v-model="newActor.lastName"
label="Apellido"
> </v-text-field>
</v-flex>
<v-flex>
<v-btn :class="['white--text','green']" #click="addActor">Enviar</v-btn>
</v-flex>
<li v-for="actor in actors" v-bind:key="actor.id" :class="['mt-5']">
id = {{actor.actorId}}
<br>
name = {{actor.firstName}}
<br>
apellido = {{actor.lastName}}
<br>
lastUpdate = {{actor.lastUpdate}}
</li>
This is my vue script.
export default {
data() {
return {
alert: false,
alertMessage: '',
alertType: 'success',
urlBase: 'http://localhost:8081/',
newActor:
{
firstName: '',
lastName: '',
lastUpdate: ''
},
background: 'yellow',
actors: []
}
},
methods:
{
getActors: function()
{
this.actors = []
let self = this
fetch(this.urlBase+'actors/all')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
for (var variable of myJson) {
self.actors.push(variable);
}
});
},
addActor: function()
{
if (this.newActor.firstName != '' && this.newActor.lastName != '')
{
let self = this
fetch(this.urlBase+'actors/add', {
method: 'POST',
body: JSON.stringify(this.newActor),
headers:{
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
this.alert = true;
this.alertMessage = "Usuario agregado con éxito";
this.getActors(); //Here is where I tried to get the actors again.
console.log(this.actors);
}
else
{
this.alert = true;
this.alertType = 'error';
this.alertMessage = "Usuario no registrado";
}
}
},
created: function()
{
this.getActors()
}
}

Answer 1

It is because this.getActors(); is called before the fetch method is done. That's the way javascript works.
You can try putting this.getActors(); in the then.
Example :
if (this.newActor.firstName != '' && this.newActor.lastName != '')
{
let self = this
fetch(this.urlBase+'actors/add', {
method: 'POST',
body: JSON.stringify(this.newActor),
headers:{
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => {
console.log('Success:', response);
this.alert = true;
this.alertMessage = "Usuario agregado con éxito";
this.getActors(); //Here is where I tried to get the actors again.
console.log(this.actors);
})
}