How to change button state and show preloader in vue axios?

Question

Vue.js

Here is the code . By clicking "buy" I generate a get request via axios (temporarily output to the {{info}} variable). How can I show the preloader at the button that was clicked on load and change the text to "In the cart" after loading? Now all buttons change text at once

Answer 1

More or less like this:

async add(good) {
  const promise = axios.get(good) // Отправляем запрос на сервер

  this.buttonText = 'Loading...' // Изменяем текст на кнопке
  this.buttonDisabled = true // Кнопку стоит отключать на период запросов

  await promise // Ожидаем завершения запроса

  this.buttonText = 'В корзине' // Изменяем текст на кнопке
  this.buttonDisabled = false // Разблокировать кнопку если нужно
}

Answer 2

Replace yours
data: {}
with

data(): {
  return {
    goods: [
      {
        imgSrc: '../dist/cropped-img/img1.png',
        title: '«Рождение Венеры» Сандро Боттичелли',
        oldPrice: '2 000 000',
        newPrice: '1 000 000',
        inStock: true
      },
      {
        imgSrc: '../dist/cropped-img/img2.png',
        title: '«Тайная вечеря» Леонардо да Винчи',
        oldPrice: '',
        newPrice: '3 000 000',
        inStock: true
      },
      {
        imgSrc: '../dist/cropped-img/img3.png',
        title: '«Сотворение Адама» Микеланджело',
        oldPrice: '6 000 000',
        newPrice: '5 000 000',
        inStock: true
      },
      {
        imgSrc: '../dist/cropped-img/img2.png',
        title: '«Урок анатомии» Рембрандт',
        oldPrice: '',
        newPrice: '',
        inStock: false
      }
    ],
    info: null,
    button: 'Купить',
    //loading: true
  }
}