更新bootstrap-vue警报的内容

时间:2018-06-13 12:37:18

标签: twitter-bootstrap vue.js

我想知道如何在显示后更新Bootstrap-Vue(Bootstrap-Vue)警报的内容。

在这种情况下需要这样:显示带链接的警报,用户单击链接以启动远程操作,警报显示加载指示符,操作完成,最后警报显示成功消息。 / p>

1 个答案:

答案 0 :(得分:0)

就像更新其他任何反应性属性一样。下面的示例显示了三种状态:默认,加载和更新。

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