How to split the string in VueJS?

Hi Friends 👋,

Welcome To SortoutCode! ❤️

To split the string in vueJS, we are using the split() method splits a string into an array of substrings, and returns the array.

Today I am going to show you How you split the string in VueJS.

Table of contains

• Define msg property for Test
• Using string.split()
• Using String() Convert Array to string show Output

Let’s start today’s tutorial How do I split the string in VueJS?

Define msg property for Test

Let’s define the msg and result in the data of the FirstComponent.vue component for testing purposes.

FirstComponent.vue

<script>
export default {
    name: 'FirstComponent',
    data() {
        return{
            msg:"Hi Friends Welcome To SortoutCode!",
            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 described in the function.

we define the msg, result you can see that.

Using string.split() method

The split() method splits the string and converts it into an array of substrings, and returns the array of substrings.

Let’s take an example, the long string msg, we are going to splits method we are going to split msg string into substring of array and store in substring variable. And print the Output :

<template>
    <div>
        <h2>Split Method Output =>  {{substring}}</h2>

    </div>
</template>
<script>
export default {
    name: 'FirstComponent',
    data(){
        return{
            msg:"Hi Friends Welcome To SortoutCode!",
            substring:'',
        }
    },
    mounted(){
        this.substring = this.msg.split(" ");   
        
    }
}
</script>

Let’s check the output of the split() method examples.

Output

Using String() Convert Array to string show Output

Let’s check the output of the full code.

FirstComponent.vue

<template>
    <div>
        <h2>Split Method Output =>  {{substring}}</h2>
        <h2>Print Output => {{result}}</h2>
    </div>
</template>
<script>
export default {
    name: 'FirstComponent',
    data(){
        return{
            msg:"Hi Friends Welcome To SortoutCode!",
            result:'',
            substring:'',
        }
    },
    mounted(){
        this.substring = this.msg.split(" ");   
        this.result = String(this.substring);
    }
}
</script>

For now, let’s check the output.

Output

All the best 👍.