How to apply Switch in VueJS using Filters?

Last Updated : 20 Dec, 2023

In this article, we will see how to apply a switch in VueJS using filters. In Vue.js the filter is the simple JS function that is mainly used to change the output of data to the browser. We can apply the Switch in Vue.js using these Filters in the following ways:

Table of Content

Using Static Approach
Using Dynamic Approach

Using Static Approach

In this method, the data and the filters will be static and can not be changed. It shows the result of the static filters applied by the programmer on the user screen.

Example: The below code example implements the static approach to apply Switch in VueJS using Filters.

HTML

<!DOCTYPE html>
 
<html>
<head>
    <title>Example 1</title>
    <script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
    </script>
</head>
 
<body>
    <div id="GFGCourses">
        <h2>GeeksforGeeks Courses</h2>
        <div v-for="course in courses" :key="course.id">
            <p>
                  <strong>{{ course.name }}:</strong> 
                  {{ course.type | courseCategory }}
              </p>
        </div>
    </div>
    <script>
        const GFGCourses = new Vue({
            el: "#GFGCourses",
            data: {
                courses: [
                    { id: 1, name: "JavaScript Basics", 
                      type: "programming" },
                    { id: 2, name: "Data Structures in Python", 
                      type: "programming" },
                    { id: 3, name: "Introduction to Machine Learning", 
                      type: "data-science" },
                    { id: 4, name: "Web Development with React",
                      type: "web-development" },
                    { id: 5, name: "Networking Fundamentals",
                      type: "networking" },
                ],
            },
            filters: {
                courseCategory: function (type) {
                    switch (type) {
                        case "programming":
                            return "Programming Course";
                        case "data-science":
                            return "Data Science Course";
                        case "web-development":
                            return "Web Development Course";
                        case "networking":
                            return "Networking Course";
                        default:
                            return "Other Course";
                    }
                },
            },
        });
    </script>
</body>
 
</html>

Output:

Using Dynamic Approach

In this method, a input will be taken from user and then filters will be applied on it to display the relevant data on the user screen.

Example: The below code example uses the dynamic approach to apply Switch in VueJS using Filters.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Example 2</title>
    <script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
    </script>
</head>
 
<body>
    <div id="app">
        <label for="courseInp">
              Enter a platform:
          </label>
        <input type="text"
               id="courseInp"
               v-model="userInput">
        <p>
            <strong>
                  {{ userInput }} : 
              </strong>
            {{ userInput | type }}
          </p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                userInput: ''
            },
            filters: {
                type: function (course) {
                    switch (course.toLowerCase()) {
                        case 'geeksforgeeks':
                            return 'It is a programming platform.';
                        case 'coursera':
                            return 'It is an online course platform.';
                        case 'udemy':
                            return 'It is an online learning platform.';
                        default:
                            return 'Course type not recognized.';
                    }
                }
            }
        });
    </script>
</body>
 
</html>