How to reverse a string using filter in Vue.js ?

Last Updated : 22 Oct, 2021

Vue is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and supporting libraries.

Filters are a functionality provided by Vue components that let you apply formatting and transformations to any part of your template dynamic data. The filter property of the component is an object. A single filter is a function that accepts a value and returns another value. The returned value is the one that’s actually printed in the Vue.js template. To reverse a string using filters, we have to write logic to reverse the string and apply the filter on a required string.

Approach 1: In this approach, we will use JavaScript inbuild methods split(), reverse() and join(). The split() method is used to split each character and converts into a set of the character array. The reverse() method reverses the array character as a whole and finally join method convert the array of characters into a normal string.

index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <script src= 
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> 
    </script> 
</head> 
  
<body> 
    <div id='parent'> 
        <p><strong>Original String: 
            </strong>{{st1}} 
        </p> 
  
        <p><strong>Reverse String : 
            </strong>{{ st1 | reverse }} 
        </p> 
        </br> 
  
        <p><strong>Original String: 
            </strong>{{st2}} 
        </p> 
  
        <p><strong>Reverse String : 
            </strong>{{ st2 | reverse }} 
        </p> 
    </div> 
      
    <script src='app.js'></script> 
</body> 
  
</html> 

app.js

const parent = new Vue({ 
    el: '#parent', 
    data: { 
        st1: 'GeekforGeeks is a computer science portal', 
        st2: 'I am a GeekforGeeks Learner', 
    }, 
  
    filters: { 
        reverse: function(data) { 
            const reverse = 
                data.split("").reverse().join(""); 
            return reverse; 
        } 
    } 
})

Approach 2: This method does not use any build-in JavaScript method but reverses the string from scratch using the basic programming logic of reversing the string. There are two pointers named i and j exchange their positional character each time until the string reverses as a whole.

index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <script src= 
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> 
    </script> 
</head> 
  
<body> 
    <div id='parent'> 
        <p><strong>Original String: 
            </strong>{{st1}} 
        </p> 
  
        <p><strong>Reverse String : 
            </strong>{{ st1 | reverse }} 
        </p> 
        </br> 
  
        <p><strong>Original String: 
            </strong>{{st2}} 
        </p> 
  
        <p><strong>Reverse String : 
            </strong>{{ st2 | reverse }} 
        </p> 
    </div> 
      
    <script src='app.js'></script> 
</body> 
  
</html> 

app.js

const parent = new Vue({ 
    el : '#parent', 
    data : { 
        st1 : 'GeekforGeeks is a computer science portal', 
        st2 : 'I am a GeekforGeeks Learner', 
    }, 
  
    filters:{ 
        reverse : function(data){ 
            var rev = []; 
            for (let i = data.length - 1,  
                j = 0; i >= 0; i--, j++) 
                rev[j] = data[i]; 
            revStr = rev.join(''); 
            return revStr; 
        } 
    } 
})