5. 리스트 필터링

by donggyu04

HTML

<div id="app">
  <input v-model.number="threshold" type="number"/><br/>
  {{ threshold }}
  <ul>
    <li v-for="emp in employee" v-text="emp.name + ' : ' + emp.salary"></li>
  </ul>
  
  <ul>
    <li v-for="emp in filteredEmployee" v-text="emp.name + ' : ' + emp.salary"></li>
  </ul>
  
  <div :class="order === 1 ? 'desc' : 'asc'" @click="order = order * -1"></div>
  <ul>
    <li v-for="emp in sortedEmployee" v-text="emp.name + ' : ' + emp.salary"></li>
  </ul>
</div>

CSS

.desc:after {
  content: "▼"
}

.asc:after {
  content: "▲"
}

Vue

new Vue({
	el: '#app',
  data: {
  	threshold: 500,
    order: 1,
  	employee: [
    	{name: 'park', salary: 391},
      {name: 'lee', salary: 732},
      {name: 'kim', salary: 655},
      {name: 'oh', salary: 460},
      {name: 'jung', salary: 211},
    ],
  },
  computed: {
  
  	filteredEmployee() {
      //let threshold = this.threshold;
    	return this.employee.filter(emp => emp.salary > this.threshold);
      
      //return this.employee.filter(function(emp) {
      	//return emp.salary > threshold;
      //});
    },
    
    sortedEmployee() {
    	let copiedEmployee = JSON.parse(JSON.stringify(this.employee));
    	return copiedEmployee.sort((e1, e2) => (e2.salary - e1.salary) * this.order);
    },
  }
});