Не могу установить данные с помощью Vue Axios

Question

Я работаю над проектом laravel с компонентами vue.Когда я делаю запрос get с axios в моем компоненте, я не могу установить переменную данных в ответ.Вот мои методы:

    methods: {

    location ()
    {

        console.log('location')

    },

    getCategories () {

        axios.get(this.baseUrl + '/api/search/categories').then((response) => {

            this.categories = response.data

            console.log(response.data)

        }).catch((e) => {

            console.log(e)

        })

    }

}

Вот мой data()

    data() {

    return {

        searchTitle: null,
        searchLocatie: null,
        searchCategorie: null,
        categories: [],
        //baseUrl: 'https://sdinbeeld.frb.io/',
        baseUrl: 'http://localhost:8888/sdinbeeld/public/'

    };

},

Я хочу установить this.categories равным response.data

, но когда яdo console.log(this.categories) в разделе mounted() возвращает только пустой массив

Кто-нибудь знает, как это исправить?

Answer 1

, поскольку axios.get возвращает обещание, которое является асинхронным действием , поэтому вы не можете получить новое значение ниже this.getCategories()

, вы можете сделать это

methods: {
  async getCategories() {
    try {
      const response = await axios.get(this.baseUrl + '/api/search/categories');
      this.categories = response.data;
      console.log(response.data);
    } catch (e) {
      console.log(e);
    }
  },
},
async mounted() {
  await this.getCategories();
  console.log(this.categories);
},

Answer 2

Это происходит из-за того, что подключенный хук срабатывает до завершения HTTP-запроса. Таким образом, на данный момент, это все еще пустой массив. Это связано с тем, что запросы Ajax являются асинхронными. Значение кода все еще может выполняться во время выполнения запроса. В пределах вашего getCategories() метода, если вы измените код на этот:

axios.get(this.baseUrl + '/api/search/categories').then((response) => {

        this.categories = response.data

        console.log(response.data);
        console.log(this.categories);

    }).catch((e) => {

        console.log(e)

    })

По завершении запроса вы увидите правильное значение.