chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue

<template>
    <div :class="classes">
        <div class="confidential-content" :class="{ 'blur': isBlurred }">
            <slot name="confidential-content"></slot>
        </div>
        <div>
            <i class="fa fa-eye toggle" aria-hidden="true" @click="toggleBlur"></i>
        </div>
    </div>
</template>

<script>
export default {
    name: "Confidential",
    data() {
        return {
            isBlurred: true,
        };
    },
    methods : {
        toggleBlur() {
            console.log('toggle blur');
            this.isBlurred = !this.isBlurred;
        },
    }
}
</script>

<style scoped lang='scss'>
    .confidential{
        align-items: center;
        display: flex;
    }
    .toggle{
        margin-top: 28px;
        cursor: pointer;
        display: block;
        float: right;
        margin-right: 20px;
    }
    .blur {
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        filter: blur(5px);
    }
</style>