Обновление содержимого bootstrap-vue alert

Question

Я хотел бы знать, как обновить содержимое предупреждения Bootstrap-Vue ( Bootstrap-Vue ) после его отображения.

Это необходимо в таком сценарии: отобразить предупреждениесо ссылкой пользователь щелкает ссылку, чтобы инициировать удаленную операцию, предупреждение отображает индикатор загрузки, операция завершается, и, наконец, предупреждение отображает сообщение об успешном выполнении.

Answer 1

Это похоже на обновление любого другого реактивного свойства.В приведенном ниже примере показаны три состояния ... по умолчанию, загрузка и обновление.

<template>
  <div id="app">
    <b-alert show>{{ alertText }}</b-alert>
    <b-btn @click="updateText">Update Text</b-btn>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      alertText: 'Default text',
    }
  },
  methods: {
    updateText() {
      this.alertText = 'loading'
      setTimeout(() => {
        this.alertText = Math.random()
      }, 2000)
    },
  }
}
</script>