confidential component created and added to personRenderBox on resourceItem and participationItem as demo. bug: eye icon only appears when clicking on the vue devtools extension in firefox?

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="confidential" v-on:click="toggleBlur">
+        <div class="confidential-content blur">
+            <slot name="confidential-content"></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Confidential",
+    computed : {
+        getConfidentialInfo: function(){
+            var infos = document.getElementsByClassName("confidential");
+            return infos;
+        },
+        addToggles: function(){
+            var infos = this.getConfidentialInfo;
+            if(this.getConfidentialInfo !== null){
+                for(var i=0; i < infos.length; i++){
+                infos[i].insertAdjacentHTML('beforeend', '<i class="fa fa-eye toggle" v-on:click="toggleBlur" aria-hidden="true"></i>');
+                }
+            }
+        },
+    },
+    methods : {
+        toggleBlur: function(e){
+            if(e.target.matches('.toggle')){
+                e.target.previousElementSibling.classList.toggle("blur");
+                e.target.classList.toggle("fa-eye");
+                e.target.classList.toggle("fa-eye-slash");
+            }
+        },
+    }
+}
+</script>
+
+<style lang='scss'>
+    .confidential{
+        display: flex;
+        align-items: center;
+    }
+    .toggle{
+        margin-left: 10px;
+        cursor: pointer;
+    }
+    .blur {
+        -webkit-filter: blur(5px);
+        -moz-filter: blur(5px);
+        filter: blur(5px);
+    }
+</style>