Vue.js 계산 함수에서 다중 차원 배열 필터링

Vue.js 계산 함수에서 다중 차원 배열 필터링

우선 순위가 3가지 다른 태그 도구 구성요소를 가지고 있다.이제 필터 검색을 하고 싶다.접속이 가능한가?tags[n]계산에 의하면tagsFilter기능?

현재 버전: https://jsfiddle.net/hej7L1jy/26/

다음으로 대체하고자 하는 항목:v-for="tag in tagsFilter" a를 받는 순간

누구 아이디어 있는 사람?

Vue.js 템플릿:

<div id="app">
  <input id="input-search" type="text" class="form-inline pull-right" v-model="textSearch" placeholder='Search...'>
  <div v-for="n in prios">
  <h3>{{n}} tag priority</h3>
    <ul v-if="tagsFilter && tagsFilter.length">
      <li :class="'tagPriority-'+n" v-for="tag in tagsFilter">
        <label class="checkbox-inline"><input name="tags[]" type="checkbox" v-model="tagSelected" :value="tag.id"> {{tag.title}}</label>
      </li>
    </ul>
  </div>
</div>

Vue.js 구성 요소:

new Vue({
    el: '#app',
        props: {
            selectedTags: {
                type: Array
            }
        },
        data() {
            return {
                prios: [ 1, 2, 3 ],
                tagSelected: [],
                tags: [],
                textSearch: ''
            }
        },
        computed: {
            tagsFilter: function() {
                var textSearch = this.textSearch;
                return this.tags.filter(function(el) {
                    return el.title.toLowerCase().indexOf(textSearch.toLowerCase()) !== -1;
                });
            }
        },
        created: function () {
            this.tagSelected = this.selectedTags;
            this.tags = {"1":[{"id":9,"title":"Auto"}],"2":[{"id":8,"title":"Elektroauto"}],"3":[{"id":10,"title":"BMW i3"},{"id":11,"title":"Opel Ampera"},{"id":12,"title":"Renault TWIZY"}]};       
        }

});

정의하더라도tags당신 안에data:

data() {
    return {
        tags: [],
    }
},

콜백 오버라이드 this.tags:

created: function () {
    this.tagSelected = this.selectedTags;
    this.tags = {"1":[{"id":9,"title":"Auto"}],"2":[{"id":8,"title":"Elektroauto"}],"3":[{"id":10,"title":"BMW i3"},{"id":11,"title":"Opel Ampera"},{"id":12,"title":"Renault TWIZY"}]};       
}

아무 것도 없는 물체로 바꾸는 것.filter방법의

계산된 속성을 사용한 필터링

템플릿:

<li :class="'tagPriority-'+n" v-for="tag in tags[0]">

된다

<li :class="'tagPriority-'+n" v-for="tag in tagsFilter[n]">

그리고

computed: {
    tagsFilter: function() {
        var textSearch = this.textSearch;
        return this.tags.filter(function(el) {
            return el.title.toLowerCase().indexOf(textSearch.toLowerCase()) !== -1;
        });
    }
},

다음이 됨:

computed: {
    tagsFilter: function() {
        var textSearch = this.textSearch;
        var filteredTags = {};
        var tags = this.tags;
        Object.keys(this.tags).forEach(function(key) {
            filteredTags[key] = tags[key].filter(function(el) {
                return el.title.toLowerCase().indexOf(textSearch.toLowerCase()) !== -1;
            });
        });
        return filteredTags;
    },
},

기본적으로 우리는 각자를 반복하고 있다.this.tags속성 및 필터링된 각 버전 추가filteredTags.

여기에서 JSFiddle을 데모하십시오.

메소드를 사용한 필터링

다른 방법(변경된 코드의 가장 적은 양)은 당신의 것을 변경하는 것이다.computed다음과 같은 주장을 가진 방법으로:

<li :class="'tagPriority-'+n" v-for="tag in tags[0]">

된다

<li :class="'tagPriority-'+n" v-for="tag in tagsFilter(n)">

그리고

computed: {
    tagsFilter: function() {
        var textSearch = this.textSearch;
        return this.tags.filter(function(el) {
            return el.title.toLowerCase().indexOf(textSearch.toLowerCase()) !== -1;
        });
    }
},

다음이 됨:

methods: {
    tagsFilter: function(i) {
        var textSearch = this.textSearch;
        return this.tags[i].filter(function(el) {
            return el.title.toLowerCase().indexOf(textSearch.toLowerCase()) !== -1;
        });
    },
},

여기에서 JSFiddle을 데모하십시오.

참조URL: https://stackoverflow.com/questions/48866505/vue-js-filter-a-multi-dimension-array-in-a-computed-function