Vue Js Filter by Range with Radio Button

This tutorial focuses on filtering a list of items by price range through radio buttons within a Vue.js application. We begin by structuring the app, displaying items with names and prices, and implementing radio buttons for filtering. The Vue instance manages data, including the list of items and the user's selected price range

written

reviewed

updated

Let's begin by setting up the basic structure of our Vue.js application. We have a list of items with their respective names and prices. The goal is to filter these items based on their price range using radio buttons

  <div id="app">
    <h2 class="title">Vue.js Filter by Range with Radio Button</h2>

    <div class="radio-button">
      <label>
        <input type="radio" value="all" v-model="selectedRange" class="radio-input" />
        All Items
      </label>
    </div>
    <div class="radio-button">
      <label>
        <input type="radio" value="under20" v-model="selectedRange" class="radio-input" />
        Price Under $50
      </label>
    </div>
    <div class="radio-button">
      <label>
        <input type="radio" value="20to40" v-model="selectedRange" class="radio-input" />
        Price $40 - $60
      </label>
    </div>
    <div class="radio-button">
      <label>
        <input type="radio" value="over40" v-model="selectedRange" class="radio-input" />
        Price Over $80
      </label>
    </div>
    <div class="radio-button">
      <label>
        <input type="radio" value="cheap" v-model="selectedRange" class="radio-input" />
        Cheap Items (Under $500)
      </label>
    </div>
    <div class="radio-button">
      <label>
        <input type="radio" value="expensive" v-model="selectedRange" class="radio-input" />
        Expensive Items ($600 and Above)
      </label>
    </div>

    <ul class="item-list">
      <li v-for="item in filteredItems" :key="item.id" class="item">
        {{ item.name }} - ${{ item.price }}
      </li>
    </ul>

  </div>

Run

Vue js Data and Filtering Logic

Let's delve into the Vue.js code that manages our data and implements the filtering logic:

Vue js Data Filtering with Range Radio Buttons

 <script>
    const app = new Vue({
      el: "#app",
      data() {
        return {
          items: [
            { id: 1, name: 'iPhone', price: 1100 },
            { id: 2, name: 'Laptop', price: 2200 },
            { id: 3, name: 'Desktop', price: 200 },
            { id: 4, name: 'Car', price: 40 },
            { id: 5, name: 'Smartwatch', price: 30 },
            { id: 6, name: 'Headphones', price: 100 },
            { id: 7, name: 'Tablet', price: 8 },
            { id: 8, name: 'Television', price: 35 },
            { id: 9, name: 'Bicycle', price: 5 },
            { id: 10, name: 'Gaming Console', price: 300 }
          ],
          selectedRange: 'all'
        };
      },
      computed: {
        filteredItems() {
          const rangeConditions = {
            'all': () => true,
            'under20': item => item.price < 20,
            '20to40': item => item.price >= 20 && item.price <= 40,
            'over40': item => item.price > 40,
            'cheap': item => item.price < 1000,
            'expensive': item => item.price >= 1000,
          };

          return this.items.filter(item => rangeConditions[this.selectedRange](item) || false);
        }

      }
    });
  </script>

In this JavaScript code, we create a Vue instance named app and define the initial data. We have an array of items with IDs, names, and prices, as well as a selectedRange property to store the user's selected price range.

The filtering logic is implemented using a computed property named filteredItems. This property dynamically filters the items based on the selected price range. We define a dictionary called rangeConditions that maps radio button values to filtering functions. The filteredItems property returns a filtered array of items based on the selected range using the conditions defined in rangeConditions

Pasted Image

VueJs Tutorial

Vue Js Filter by Range with Radio Button

Feedback for Abhishek

Vue js Data and Filtering Logic

Vue js Data Filtering with Range Radio Buttons