How to Check if a String is Palindrome or Not Without Filters in VueJS ?

Last Updated : 18 Dec, 2023

In VueJS, we can create a simple palindrome checking function by comparing the characters at the proper corresponding positions in the string. We will iterate over half of the string length and check if the characters are the same as each other. In this article, we will check whether the string is palindrome or not by using the two different approaches that are different from filters in Vue.js.

Table of Content

Using VueJS Method
Using Computed Property

Using VueJS Method property

In this approach, we are using the methods that contain the function component and call that function to perform the palindrome check. According to the input, the palindrome is checked and the result is been printed.

Example: The below code example illustrates the use of methods to check a palindrome string in VueJS.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Palindrome Check</title>
</head>
 
<body>
    <div id="app">
        <input v-model="str1"
        placeholder="Enter a string">
        <p>{{ str1 }} is 
            {{ gfgapproach1() ? 
                'a palindrome' : 
                'not a palindrome' 
            }}
        </p>
    </div>
    <script src=
        "https://cdn.jsdelivr.net/npm/vue@2">
    </script>
    <script>
        // app.js
        new Vue({
            el: '#app',
            data: {
                str1: '',
            },
            methods: {
                gfgapproach1() {
                    const temp = 
                    this.str1.toLowerCase().
                    replace(/[^a-zA-Z0-9]/g, '');
                    const res = temp.split('').
                    reverse().join('');
                    return temp === res;
                },
            },
        });
 
    </script>
</body>
 
</html>

Output:

Output1

Using VueJS Computed Property

In this aprroach, we used the computed property which automatically tracks its reactive dependencies. We have used the gfgapproach2() computed property which is dynamically checking if the str1 is palindrome or not.

Example: The below code example will explain the use of computed property to check palindrome string.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Palindrome Check</title>
</head>
 
<body>
    <div id="app">
        <input v-model="str1"
        placeholder="Enter a string">
        <p>{{ str1 }} is 
            {{ gfgapproach2 ? 
                'a palindrome' : 
                'not a palindrome' 
            }}
        </p>
    </div>
    <script src=
        "https://cdn.jsdelivr.net/npm/vue@2">
    </script>
    <script>
        new Vue({
        el: '#app',
        data: {
            str1: '',
        },
        computed: {
            gfgapproach2() {
              const temp = 
              this.str1.toLowerCase().
              replace(/[^a-zA-Z0-9]/g, '');
              const res = temp.split('').
              reverse().join('');
              return temp === res;
            },
        },
        });
    </script>
</body>
 
</html>