I cant get the alert example to work

[math3vz]

My HTML code:

<div id="app">
  <alert :show.sync="showRight" placement="top-right" duration="3000" type="success" width="400px" dismissable>
    <span class="icon-ok-circled alert-icon-float-left"></span>
    <strong>Well Done!</strong>
    <p>You successfully read this important alert message.</p>
  </alert>
</div>

My JS code:

var vm = new Vue({
    components: {
        alert: VueStrap.alert
    },
    el: "#app",
    data: {
        showRight: false,
        showTop: false
    }
})

With this code, the alert is not showing (display none) when I load the page.

If i remove the :show.sync="showRight" the alert does show, but is never dismissed.

Vuestrap v1.1.4 And Vue v1.0.26.

Can you guys help me? What I am doing wrong?

[pierophp]

+1

[pierophp]

Just works if I change the show property:

<template>
  <alert type="success" duration="3000" :show.sync="alertShow">
   Test
  </alert>
   <a class="btn btn-primary" v-on:click="showMe()">Show</a>
</template>

<script>

  import { alert } from 'vue-strap'

  export default {
    components: {alert},
    data() {
      return {
        alertShow: false
      }
    },
    methods: {
      showMe() {
        this.alertShow = true
      }
    }
  }
</script>

With this code the duration doesn't works:

<template>
  <alert type="success" duration="3000">
   Test
  </alert>
</template>

<script>

  import { alert } from 'vue-strap'

  export default {
    components: {alert}
  }
</script>

[wffranco]

@matheusmmo actually the duration only work if the alert start hidden (show value set false). If you want to show the alert starting your page do that:

var vm = new Vue({
    components: {
        alert: VueStrap.alert
    },
    el: "#app",
    data: {
        showRight: false,
        showTop: false
    },
    ready: function() {
       //here you show the alert
       this.showRight = true;
    }
})