Как в vue axios менять состояние кнопки и показывать прелоадер?

Question

[anton_trofimov95]

Вот код. По нажатию "купить" у меня генерируется get запрос посредством axios (временно вывел в переменную {{info}}). Как мне при загрузке показать прелоадер у кнопки, по которой кликнули и после загрузки изменить текст на "В корзине"? Сейчас сразу все кнопки меняют текст

Answer 1

[Alex]

Примерно так:

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

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

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

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

Comments

[anton_trofimov95]

Alex у меня в get запросе должен быть тот url, который указан. Он не связан с товарами

[Alex]

anton_trofimov95, Используйте любой url.

[anton_trofimov95]

Alex, у вас в запросе get стоит good. Если я вставлю url, good получается не будет использоваться

Answer 2

[NerVik]

Замени свой
data: {}

на

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

Comments

[NerVik]

хотя это только часть ответа, если эот код действительно живой, а не просто вырезан кусками для показа