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>
            <i class="fa fa-eye toggle" :class="positionBtn" aria-hidden="true" @click="toggleBlur"></i>
        </div>
    </div>
</template>

<script>
export default {
    name: "Confidential",
    props: ['positionBtnFar'],
    data() {
        return {
            isBlurred: true,
        };
    },
    methods : {
        toggleBlur() {
            console.log(this.positionBtnFar);
            this.isBlurred = !this.isBlurred;
        },
    },
    computed: {
        positionBtn() {
            return this.positionBtnFar ? 'toggle-far' : 'toggle-close'
        }
    }
}
</script>

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