Блог

В моем веб-приложении Vue Bootstrap (v2.21.2) я хочу использовать тосты, чтобы сообщить пользователю о некоторых ошибках. Эти ошибки создаются клиентом REST-API. В моих vb-компонентах я улавливаю эти ошибки и вызываю функцию, которая сама использует https://bootstrap-vue.org/docs/components/toast#toasts-on-demand this.$bvToast.toast() для динамического создания и отображения сообщения об ошибке. Как и ожидалось, тост создается, но мгновенно снова скрывается. Я попытался отключить свойство автоматического скрытия и поиграть с тайм-аутом, но это не возымело никакого эффекта. Поскольку я вызываю эту функцию в некоторых компонентах, я также пытался вызвать this.$root.$bvToaster.toast() , но тосты по-прежнему отображаются только в течение примерно 100 микросекунд или около того.

Соответствующий (сокращенный) код-выдержки из моего проекта:

Приложение.vue:

 <template>
  <div id="app">
    <Navbar @viewChanged="view = $event;" />
    <Pki v-if="view == 'pki'" />
  </div>
</template>

<script>
import Navbar from "./components/Navbar.vue";
import Pki from './components/Certificates'
export default {
  data() {
    return {
      view: null
    }
  },
  name: "FooBar",
  components: {
    Navbar,
    Pki
  },
};
</script>
 

Сертификаты.vue:

 <template>
    <!-- ... -->
</template>

<script>
    // ...
    mounted() {
      this.getCertificates();
    },
    methods: {
      alert(title, content, variant = 'danger') {
        this.$bvToast.toast(content, {
          title: title,
          toaster: 'b-toaster-bottom-right',
          variant: variant,
          solid: true,
          appendToast: true,
          autoHideDelay: 10000
        });
      },
      getCertificates() {
        axios.get("/v1/pki/certificates")
        .then((response) => {
             // ...
          });
        })
        .catch((error) => {
          this.alert('API Error', 'failed to fetch certificate list ('   error.message   ')');
          console.log('getCertificates(): HTTP ERROR '   error.response.status   ' ('   error.response.data   ')');
        });
      }
    }
</script>
 

Я думаю, что у вас нет соответствующей версии css начальной загрузки.

например, 4.5.3 загрузочный css и после загрузки начальной загрузки vue

Была та же проблема, и это решило ее