Обновление массива после выполнения запроса

Question

я впервые работаю с Vue, и я пытаюсь сделать простой CruD, используя Spring в качестве бэкэнда. Моя проблема в том, что когда я отправляю актеру запрос на публикацию и пытаюсь сделать запрос на получение, чтобы получить новый список актеров, он не обновляется, пока я не обновлю страницу.

Это часть HTML, которую я хочу отобразить. Просто форма и список актеров, которые я привел из своей БД.

  <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>

Это мой сценарий Vue.

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

Это потому, что this.getActors(); вызывается до выполнения метода fetch. Вот как работает JavaScript.

Вы можете попробовать ввести this.getActors(); в then.

Пример:

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);
      })
    }