Vue Js Filter by Range with Radio Button

<!DOCTYPE html>
<html lang="en">

<body>
  <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>
  <script type="module">
    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>
  <style scoped>
    #app {
      margin: 0 auto;
      width: 500px;
      text-align: center;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
      padding: 20px;
    }

.title {
      font-size: 24px;
      color: #333;
      margin-bottom: 20px;
    }

/* Styles for radio buttons */
    .radio-button {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

.radio-input {
      margin-right: 5px;
    }

.radio-input[type="radio"]+label {
      position: relative;
      padding-left: 30px;
      cursor: pointer;
    }

.radio-input[type="radio"]+label:before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      border: 2px solid #007BFF;
      border-radius: 50%;
      background-color: transparent;
    }

.radio-input[type="radio"]:checked+label:before {
      background-color: #007BFF;
    }

/* Styles for the item list */
    .item-list {
      list-style: none;
      padding: 0;
    }

.item {
      background-color: #f9f9f9;
      border: 1px solid #eee;
      padding: 10px;
      margin-bottom: 5px;
      border-radius: 4px;
    }

/* Hover effect for items */
    .item:hover {
      background-color: #f0f0f0;
    }
  </style>
</body>

</html>