Vue

by Andres Abadia

HTML

<div id="app">
  <h5>Search</h5>
  <input type="text" v-model="search" placeholder="Search title.." /><br><br>
  <h5>Filter</h5>
  <li v-for="filter in possibleFiltersArr" :key="filter">
    <label>
      <input type="checkbox" @change="toggleFilter(filter)" :checked="filters.includes(filter)">

      <span>{{filter}}</span>
    </label>
  </li>
  <div class="block" v-for="(product, index) in filteredSearch">
    <hr>
    <h3>{{product.name}}</h3>
    <p>Price: £{{product.price}}</p>
    <p>Location: {{product.location}}</p>
    <hr>

  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
  posibleFiltersArr:[],
		filters:[],
     search:"",
    products: [{
                        name: "milk",
                        location: "London",
                        price: 100
                    },
                    {
                        name: "oranges",
                        location: "Birmingham",
                        price: 80
                    },
                    {
                        name: "apples",
                        location: "Edinburgh",
                        price: 90
                    },
                    {
                        name: "bananas",
                        location: "Paris",
                        price: 120
                    },
                    {
                        name: "bread",
                        location: "Paris",
                        price: 110
                    },
                    {
                        name: "water",
                        location: "Oslo",
                        price: 90
                    },
                    {
                        name: "soda",
                        location: "London",
                        price: 90
                    },
                    {
                        name: "tea",
                        location: "Oslo",
                        price: 120
                    },
                    {
                        name: "bakedbeans",
                        location: "Oslo",
                        price: 140
                    }
                ],
   
    
  },
methods: {
   toggleFilter (newFilter) {
      this.filters = !this.filters.includes(newFilter) 
        ? [...this.filters, newFilter] 
        : this.filters.filter(f => f !== newFilter)
    },
    updatePossibleFilters(){
    	this.possibleFiltersArr=[...new Set(this.filteredSearch.map(x => x.location))]
    }
    },
    created(){
    	this.updatePossibleFilters()
    },
  computed: {
   //...