Creating an email censoring filter in Vuejs

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”.

v-model in child components

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>

Idle Mobster – Simple game made in Vuejs

So to learn Vuejs I decided to make a simple idle game. You know, one of those games that kinda plays itself by upgrading stuff and increasing your income etc.

This game is inspired by the old school mafia text-based browser games, so you’ll find the usual stuff like petty crime, upgrading weapons and managing businesses.

Current state of the game is very simple and there’s no prestige system implemented yet, but I have many features planned ahead. It’s still a work in progress, but I released it on itch.io (which is also my first time so learning by doing):

The code will eventually be available at my github site (probably github.com/kek91/idle-mobster (will update this post when it’s published).

Format number in Javascript for Integer and Float types

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;
    }
}