Функция Axios 'Get' не вызывается

Question

Итак, я хочу получить обновленный список контактов при добавлении нового контакта.К сожалению, axios загружает запрос get только в экземпляре beforeMount ().Когда я пытаюсь вызвать функцию внутри запроса axios.post, когда он успешен, список контактов исчезает, пока я снова не обновлю страницу.

Я использую Laravel 5.7 и VueJs 2.5.22.

 import axios from 'axios';

  export default {
    data() {
      return {
        companion: {
          name: '',
          desc: '',
          primaryPhone: '',
          secondaryPhone: '',
          email: '',
          address: '',
          notes: '',
          image: ''
    },
    characterAmount: 0
  };
},
props: {
  addCompanion: {
    type: Boolean
  }
},
methods: {
  checkNotesLength(e) {
    this.characterAmount = 
    document.getElementById('notes').value.length;

    if (e.keyCode === 8) {
      this.characterAmount--;
      if (this.characterAmount < 0) {
        this.characterAmount = 0;
      }
    } else {
      this.characterAmount++;
      if (this.characterAmount > 150) {
        this.characterAmount = 150;
      }
    }
  },
  processFile(e) {
    var input = e.target;
    var reader = new FileReader();

    reader.onload = (e) => {
      this.companion.image = e.target.result;
    }
    reader.readAsDataURL(input.files[0]);
  },
  getCompanions() {
    const url = window.location + 'companions';

    axios.get(url)
      .then((response) => {
        this.companions = response.data;
      })
      .catch((error) => {
        // handle error
        console.log(error);
      });
  },
  submitCompanion() {
    const formData = {
      name: this.companion.name,
      desc: this.companion.desc,
      primaryPhone: this.companion.primaryPhone,
      secondaryPhone: this.companion.secondaryPhone,
      email: this.companion.email,
      address: this.companion.address,
      notes: this.companion.notes,
      image: this.companion.image
    }
    axios.post('/companion/create', formData)
    .then(this.getCompanions())
    .then((response) => {
      this.addCompanion = !this.addCompanion;
      //need to clear form and include messages, also need to add validation
    })
    .catch((error) => {
      console.log(error);
    });
  }
}
}

Функция beforeMount () находится в моем App.vue, которая просто вызывает ту же функцию getCompanions, что и приведенная выше.

Answer 1

Проблема, которую я вижу в вашем коде, заключается в том, что вы неправильно передаете обратный вызов.Этот код немедленно выполнит функцию getCompanions():

.then(this.getCompanions())

Чтобы передать ее в качестве обратного вызова, попробуйте что-то вроде этого

.then(this.getCompanions.bind(this))
// OR
.then(() => this.getCompanions())

Answer 2

Вероятно, это связано с неправильной структурой URL.

const url = window.location + 'companions';

должно быть

const url = window.location + '/companions';