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

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