Почему анимация загрузки не убирается?

Question

[Ilshat Gayanov]

При нажатии на кнопку производит анимация имитации загрузки, но после того как запрос завершился, текст внутри кнопки становится первоначальным, а анимация не исчезает, при повторном нажатии добавляется, можно ли решить это?
до:

после:


Код:

<template>
      <b-button v-if="btnLoading"
                       variant="outline-warning"
                       class="d-block text-white text-uppercase"
                       disabled>
                       Подождите <i class="fas fa-spinner fa-spin"></i>
       </b-button>
       <b-button v-else="btnLoading" variant="outline-warning"
                        class="d-block text-white text-uppercase"
                        @click="buy()">
                        Купить за {{ product.original_price }} руб.
       </b-button>
</template>
<script>
        data() {
            return {
                tabIndex: 0,
                firstServer: {},
                product: {},

                order: {
                    nickname: '',
                    productId: ''
                },

                btnLoading: false
            }
        },
</script>

Answer 1

[Сергей delphinpro]

<template>
	<b-button
		variant="outline-warning"
		class="d-block text-white text-uppercase"
		:disabled="btnLoading"
	>
		<span v-text="buttonText"></span>
		<i class="fas fa-spinner fa-spin" v-if="btnLoading"></i>
	</b-button>
</template>
<script>
...
		data() {
			return {
                tabIndex: 0,
                firstServer: {},
                product: {},

                order: {
                    nickname: '',
                    productId: ''
                },

                btnLoading: false
            }
        },
		
		computed: {
			buttonText() {
				return this.btnLoading
					? 'Подождите'
					: `Купить за ${ this.product.original_price } руб.`;
			}
		}
...
</script>

Comments

[Ilshat Gayanov]

спасибо большое)