How to convert number to string in vueJS?

Hi Friends 👋,

Welcome To SortoutCode! ❤️

Today I am going to show you How do you convert numbers to strings in VueJS.

The String() method creates a primitive String type for a number that is passed in it as a parameter.

All below tutorials work on javascript, React, React Native, Vue, Node, Deno, typescript, and all javascript frameworks.

Table of Content

• Define number for test from String() method

Let’s start the today’s tutorial How do I convert number to string in VueJS?

Define number for test from String() method

Let’s define the number in data of the FirstComponent.vue component for testing purposes.

<script>
export default {
    name: 'FirstComponent',
    data() {
        return{
            num:'',
            result:'', 
        }
    },
}
</script>

Data is used to define properties in a particular component. In a single-file component, data() is a function that returns a set of properties that have been defined in the function.

we define the two empty properties that are num and result.

For now, we create first on num property in data and store number on it and check their datatype.

For a number to string conversion, we are using the String(this.num); method and re-console string value and their datatype.

<template>
    <div>sortoutcode.com</div>
</template>
<script>
export default {
    name: 'FirstComponent',
    data() {
        return{
            num:'',
            result:'', 
        }
    },
    mounted(){
        this.num = 786;
        console.log(this.num, typeof(this.num)); 

        this.result = String(this.num);
        console.log(this.result, typeof(this.result));
    }
}
</script>

For now, let’s check the output.

Output

All the best 👍.