theUnforgiven
2 years ago
66
16
Vue

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

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

<script>
    export default {
        props: ['message'],

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

        created() {
            if (this.message) {
                this.flash(this.message);
            }

            window.events.$on(
                'flash', message => this.flash(message)
            );
        },

        methods: {
            flash(message) {
                this.body = message;
                this.show = true;
                this.hide();
            },

            hide() {
                setTimeout(() => {
                    this.show = false;
                }, 4000);
            }
        }
    };
</script>

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

</style>

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.