How to replace the string in VueJS?

Hi Friends 👋,

Welcome To SortoutCode! ❤️

To replace the String in vueJS, we are using the replace() method to replace the string with another string that is passed in the parameter And return the output with replaced string.

Today I am going to show you How you replace the String in VueJS.

Table of contains

• Define msg,result property for Test
• Using string.replace()

Let’s start today’s tutorial How do I replace 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 aguidehub.com!",
            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.replace()

The replace() method searches the string for value and returns the new string with replaced string. The replace() method does not change the origin string, it returns the new string with replaced value.

<template>
    <div>
        <h2>Before Replace => {{msg}}</h2>
        <h2>After Replace Print Output => {{result}}</h2>
    </div>
</template>
<script>
export default {
    name: 'FirstComponent',
    data(){
        return{
            msg:"Hi Friends Welcome To aguidehub.com!",
            result:'',
        }
    },
    mounted(){
        this.result = this.msg.replace("aguidehub.com","sortoutCode.com");  
    }
}
</script>

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

Output

All the best 👍.