나는 사람들의 첫 번째 이름과 마지막 이름을 가진 데이터 세트를 가지고 있고 사용자가 2</p> <p>지금까지 뷰와 다음을 통해 검색 할 수있는 뷰

Question

으로 정렬 된 목록에서 여러 속성을 검색하는 방법, I 먼저 Lodash를 사용하여 성을 기준으로 목록을 정렬 한 다음 유형별로 분류했습니다. 이제는 배열을 필터링/검색 (올바른 단어를 모르는 경우)하고 첫 번째 또는 성의 이름 (또는 일부)이 입력 필드의 내용과 일치하는 사람들 만 표시하려고합니다.

바닐라 JS 솔루션은 Lodash 솔루션만큼이나 감사 할 것입니다!

props: { 
    people: { 
    type: Array, 
    required: true 
    } 
}, 

data: function(){ 
    return { 
    filter: '', 
    people:[{ 
     "FirstName" : "Stefan", 
     "LastName" : "Braun", 
     "Type" : "EN", 
    }, 
    { 
     "FirstName" : "Jenny", 
     "LastName" : "Smith", 
     "Type" : "VO", 
    }, 
    { 
     "FirstName" : "Susan", 
     "LastName" : "Jones", 
     "Type" : "EN", 
    }] 
    } 
} 

methods: { 

    matchingType: function (people, type) { 
    people = this.alphabeticallyOrdered(this.searchFiltered(people)) 

    return people.filter(function (person) { 
     return person.Type == type 
    }) 
    }, 

    alphabeticallyOrdered: function(arr){ 
    return _.orderBy(arr, ['FirstName', 'LastName']) 
    }, 

    searchFiltered: function(arr){ 
    filter = this.filter 
    return _.some(arr, _.unary(_.partialRight(_.includes, this.filter))); 
    } 
}, 

template: ` 
    <div> 
    <input type="text" model="filter"></input> 
    <div v-for="type in types" class="type" :class="type.short"> 
     <h2 class="type-name">{{type.long}}</h2> 
     <div class="people"> 
     <div v-for="person in matchingType(people, type.short)" class="person"> 
      <div class="personal-details"> 
      <p class="h2">{{person.FirstName}}</p> 
      <p class="h4">{{person.LastName}}</p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
` 

Answer 1

일반적으로 computed property을 사용하여 처리합니다.

다음은 예입니다. 나는 당신이하고있는 것을 정확하게 알지 못하면서 복제 할 수없는 부분이 있기 때문에 당신의 예제에서 많은 여분의 코드를 제거하고있다. (당신은 컴포넌트의 채우기 코드를 게시하지 않는다.) 그러나 본질적으로, 당신은 계산 된 다음과 같은 속성을 추가하고 템플릿에서 반복하십시오.

console.clear() 
 

 
new Vue({ 
 
el: "#app", 
 
    data:{ 
 
    people:[{ 
 
     "FirstName" : "Stefan", 
 
     "LastName" : "Braun", 
 
     "Type" : "EN", 
 
    }, 
 
    { 
 
     "FirstName" : "Jenny", 
 
     "LastName" : "Smith", 
 
     "Type" : "VO", 
 
    }, 
 
    { 
 
     "FirstName" : "Susan", 
 
     "LastName" : "Jones", 
 
     "Type" : "EN", 
 
    }], 
 
    filterText: null 
 
    }, 
 
    computed:{ 
 
    filteredPeople(){ 
 
     // If there is no filter text, just return everyone 
 
     if (!this.filterText) return this.people 
 
     
 
     // Convert the search text to lower case 
 
     let searchText = this.filterText.toLowerCase() 
 
     
 
     // Use the standard javascript filter method of arrays 
 
     // to return only people whose first name or last name 
 
     // includes the search text 
 
     return this.people.filter(p => { 
 
     // if IE support is required and not pre-compiling, 
 
     // use indexOf instead of includes 
 
     return p.FirstName.toLowerCase().includes(searchText) || 
 
     p.LastName.toLowerCase().includes(searchText) 
 
     }) 
 
    } 
 
    
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.min.js"></script> 
 
<div id="app"> 
 
    <input type="text" v-model="filterText"> 
 
    <ul> 
 
    <li v-for="person in filteredPeople"> 
 
     {{person.FirstName}} {{person.LastName}} 
 
    </li> 
 
    </ul> 
 
</div>