Vue 계산 됨 주문과 결합한 필터

다음 계산 기능이있어서 검색 입력 필드를 기준으로 집을 필터링합니다. 이 작동합니다.Vue 계산 됨 주문과 결합한 필터

computed: { 
    filtered: function() { 
     var self = this; 
     let searchTerm = (this.search || "").toLowerCase() 
     if(this.houses) { 
      return this.houses.filter(function(item) { 
       let city = (item.city || "").toLowerCase() 
       let street = (item.street || "").toLowerCase() 
       return city.indexOf(searchTerm) > -1 || street.indexOf(searchTerm) > -1; 
      }) 
     } 
     } 
    }

하지만 도시 및 거리에서도 주문을 구현하는 방법은 무엇입니까? 오름차순과 내림차순

<input type="search" v-model="search" placeholder="Search for City OR Street" /> 
<table> 
    <thead> 
     <tr> 
      <th @click="sortByStreet()">Street</th> 
      <th @click="sortByCity()">City</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr v-for="house in filtered"> 
      <td>{{ house.street }}</td> 
      <td>{{ house.city }}</td> 
     </tr> 
    </tbody> 
</table>

가 어떻게 기능 sortByStreet() 및 sortByCity() 그것을 해결하기 위해 :

이

테이블입니까? 필터와 결합.

출처

2017-12-12 user1469734

click은 변수를 설정해야합니다. 계산 결과를 사용하여 결과 정렬 방법을 결정하는 sortBy이라고해야합니다. 변수가 변경되면 계산 된 값이 다시 계산됩니다.

출처

2017-12-12 13:50:25

new Vue({ el: '#app', data: { search: 'Z-town', reverse: false, houses: [{ street: 'First', city: 'Z-town' }, { street: 'Second', city: 'A-town' }, { street: 'First', city: 'A-town' }, { street: 'Second', city: 'Z-town' } ], sortBy: 'street' }, computed: { filtered: function() { const result = this.houses .filter(entry => [entry.street, entry.city].find(x => x === this.search)) .sort((a, b) => a[this.sortBy] < b[this.sortBy] ? -1 : a[this.sortBy] !== b[this.sortBy] ); return this.reverse ? result.reverse() : result; } } });

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <div id="app"> <input type="search" v-model="search" placeholder="Search for City OR Street" /> <input type="checkbox" v-model="reverse"> Descending <table> <thead> <tr> <th @click="() => sortBy = 'street'">Street</th> <th @click="() => sortBy = 'city'">City</th> </tr> </thead> <tbody> <tr v-for="house in filtered"> <td>{{ house.street }}</td> <td>{{ house.city }}</td> </tr> </tbody> </table> </div>

그것은 Vue1에 그렇게했지만, 노 Vue2. 아니면 예제가 있습니까? – user1469734

예제 스 니펫을 추가했습니다. –

좋습니다! 그러나 그때 나는 을 더 이상 사용할 수 없다. 이 두 가지 세계를 병합하는 문제. 그리고 그것은 오름차순입니다. – user1469734

답변

관련 문제