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

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

<script>
export default {
    name: "Confidential",
    data() {
        return {
            isBlurred: true,
            toggleIcon: 'fa-eye',
        };
    },
    methods : {
        toggleBlur() {
            console.log(this.positionBtnFar);
            this.isBlurred = !this.isBlurred;
            this.toggleIcon = this.isBlurred ? 'fa-eye' : 'fa-eye-slash';
        },
    },
}
</script>

<style scoped lang='scss'>
    .confidential{
        align-content: center;
    }
</style>