2 years ago

Custom "type" to the class

Posted 2 years ago by theUnforgiven

Hi all,

I have followed @JeffreyWay's Forum series, the last episode shows how to use Vue for flash messaging which is great and I have working, but now I want to add the type to the alert.

Here's the full .vue file

    <div class="alert alert-success alert-flash" role="alert" v-show="show">
        <strong>Success!</strong> {{ body }}

    export default {
        props: ['message'],

        data() {
            return {
                body: '',
                show: false,

        created() {
            if (this.message) {

                'flash', message => this.flash(message)

        methods: {
            flash(message) {
                this.body = message;
       = true;

            hide() {
                setTimeout(() => {
           = false;
                }, 4000);

    .alert-flash {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        position: fixed;
        right: 25px;
        bottom: 25px;
        background: #009999;
        border: none;
        color: #fff;


So the alert-success is where I want to pass the type to this. I asked Jeff on Twitter and this was his reply:

Add a custom property to the <flash> component. <flash type=“warning”>

But since I last used Vue (0.9.1) I think a couple of things have changed in the latest version, so I'm a little unstuck as to what to add to the div class as well as where to put the relevant code in Vue to make this work.

Anyone care to help a brother out :)

Please sign in or create an account to participate in this conversation.