You can show and hide the alert by means of active.sync
and a Boolean bind as value
The property to determine if the alert can be closed is closable
{{ !active1 ? 'Open Alert' : 'Close Alert' }} 1
{{ !active2 ? 'Open Alert' : 'Close Alert' }} 2
Chupa chups topping bonbon. Jelly-o toffee I love. Sweet I love wafer I love wafer.
You can also change the icon used for the close buton on the alerts
Chupa chups topping bonbon. Jelly-o toffee I love. Sweet I love wafer I love wafer.
<vs-button @click="active1=!active1">{{ !active1 ? 'Open Alert' : 'Close Alert' }} 1</vs-button>
<vs-button @click="active2=!active2">{{ !active2 ? 'Open Alert' : 'Close Alert' }} 2</vs-button>
<vs-alert :active.sync="active1" closable icon-pack="feather" close-icon="icon-x">
Chupa chups topping bonbon. Jelly-o toffee I love. Sweet I love wafer I love wafer.
</vs-alert>
<vs-alert :active.sync="active2" closable close-icon="icon-x-circle" icon-pack="feather">
Chupa chups topping bonbon. Jelly-o toffee I love. Sweet I love wafer I love wafer.
</vs-alert>