ITDB

This is a neat little function you can use as a filter in Vuejs to partially censor emails so for instance myemail@example.com will show as m****l@e*********m. In other words, show the first and last letter before and after the @ delimiter.

filters: {
    censorEmail(val) {
        try {
            let arr = val.split("@");
            let wrd = arr[0][0] + "*".repeat(arr[0].length-2) + arr[0].slice(-1);
            let wrd2 = arr[1][0] + "*".repeat(arr[1].length-2) + arr[1].slice(-1);
            return wrd + "@" + wrd2;   
        } catch (error) {
            return "Not a valid email";
        }
    }
}

There’s not really any validation for a proper email address happening, we just check if the input value contains a @. If not, it simply returns “Not a valid email”.

If you’re having trouble using v-model for input elements in child components then welcome to the club. Here’s a quick way to solve it by using $emit to pass data back to parent:

App.vue:

<ChildComponent 
    v-bind:myvar="myvar"
    @myfunction="myfunction"
/>

<script>
export default {
    name: "App",
    components: {
        ChildComponent,
    },
    data: function() {
        return {
            myvar: "foo"
        }
    },
    methods: {
        myfunction(val) {
            this.myvar = val;
        }
    }
};
</script>

ChildComponent.vue:

<template>
    <input :value="myvar" @input="$emit('myfunction', $event.target.value)">
</template>

<script>
export default {
    name: 'ChildComponent',
    props: {
        myvar: String,
    }
};
</script>

I was stuck trying to format a Number variable when creating an output filter in Vuejs.

Originally I used

filters: {
    filterNumber(val) {
        if(typeof(val) == "number") {
            return new Intl.NumberFormat().format(val);
        }
        return val;
    }
}

That will output a number like “123456” as “123 456”. But I also want it to skip decimals. Using .toFixed(0) doesn’t work as that only accept Float variables. Casting the Intl variable to Float using parseFloat() around it didn’t work either.

The solution was to use .toLocaleString() instead, like this:

filters: {
    filterNumber(val) {
        if(typeof(val) == "number") {
            return val.toLocaleString('US', {minimumFractionDigits: 0, maximumFractionDigits: 0});
        }
        return val;
    }
}