Vue

by Optimix

HTML

<div id="app">

  Price filter:
  <input type="number" v-model="price">
  <br>
  <button @click="changeSort">
  Change sort
  </button> current sort: {{ sort }}
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in todos" :key="todo.id">
      <span v-show="todo.show">
          {{ todo.text }} Price: {{todo.price}} Duration: {{todo.duration}}
      </span>
    </li>
  </ol>
</div>

Babel + JSX

new Vue({
  el: "#app",
  data: {
     sortByPrice: true,
     sort: 'price',
     price: 0,
     show: true,
     result: [
      { id:1, text: "Learn JavaScript", show: true, price: 100, duration: 2 },
      { id:2, text: "Learn Vue", show: true, price: 200, duration: 1 },
      { id:3, text: "Play around in JSFiddle", show: true, price: 500, duration: 5 },
      { id:4, text: "Build something awesome", show: true, price: 550, duration: 4 }
    ]
    
  },
  computed: {
    todos() { 
    if(this.sortByPrice){
       return this.result.sort(function(a,b){
       			return a.price - b.price;
       })
    } else {
    	return this.result.sort(function(a,b){
      	return a.duration - b.duration
      })
    }
    
    return }
  },
  methods: {
  	changeSort: function(){
    	this.sortByPrice = !this.sortByPrice
      if(this.sortByPrice)
      this.sort = 'price'
      else
      this.sort = 'time'
    }
  },
  
  watch: {
      price: {
        deep: true,
        handler(price){
        this.todos.filter(function(value){
          if(value.price < price){
                value.show = false
             } else {
                value.show = true
             }
        })
      
        }
     } 
  }
})