VueJs 2 - 여러 커스텀필터 사용

VueJs 2 - 여러 커스텀필터 사용

Vuejs 2.0은 v-for를 사용할 때 기본 제공 필터(필터비, 주문비, 제한비)를 더 이상 사용하지 않습니다.Filterby 및 Orderby 필터의 기능을 재현하려고 합니다.

양쪽의 필터가 개별적으로 동작하고 있습니다만, 조합하려고 하면 문제가 생깁니다.

관련 템플릿 섹션:

<tr class="vu-row" v-for="item in tableFilter">
  <td v-for="head in columns">{{item[head[".key"]]}}</td>
</tr>

관련 스크립트 섹션:

import { mapGetters } from 'vuex'
import db from './db'

export default {
  firebase: {
    sections: db.ref('HE'),
    columns: db.ref('Columns')
  },
  computed: {
    ...mapGetters({
      query: 'queryGet',
      sortkey: 'sortkeyGet',
      sortorders: 'sortOrdersGet'
    }),
    tableFilter: function () {
      return this.orderBy(function () {
        return this.findBy(this.sections, this.query, 'Designation')
      }, this.sortorders[this.sortkey], this.sortkey)
    }
  },
  methods: {
    findBy: function (list, value, column) {
      return list.filter(function (item) {
        return item[column].includes(value)
      })
    },
    orderBy: function (list, order, column) {
      return list.sort(function (a, b) {
        return order * (a[column] - b[column])
      })
    }
  },
........(more irrelevant code)
}

그sections데이터는 루프를 통과하고 필터링하려는 개체의 배열로 구성됩니다.

이 문제는tableFilter계산 속성두 개를 제대로 묶는 방법을 모르겠어요.findBy그리고.orderBy기능들.각 필터는 개별적으로 호출하면 자동으로 작동합니다.

어떤 도움이라도 주시면 감사하겠습니다.고마워요.

편집

참고로 이 만지작거리는 내가 만들었다.여기 작업 검색 기능이 있습니다(검색 기능은 첫 번째 열만 검색하며 대소문자를 구분함). 테이블 헤더를 클릭할 때 작업 정렬 기능이 있는 기능이 있습니다(첫 번째 열로 정렬하는 기능은 작동하지 않습니다).

여기 제가 두 가지 기능을 연결하려고 하는 바이올린이 있습니다.작동이 안 되는 것 같아요.

고쳤다.그 미사에서는 오타나 다른 사소한 것들을 놓치고 있어요.숫자 정렬, 물론 문자열 정렬은 아니죠.

check code in JSFiddle https://jsfiddle.net/62u2e4bj/

도움이 됐으면 좋겠다!

언급URL : https://stackoverflow.com/questions/40857991/vuejs-2-using-multiple-custom-filters