계산 된 속성을 사용하여 배열을 필터링하는 방법은 무엇입니까?

Question

Vue.js 2.0의 계산 된 속성을 사용하여 배열을 필터링하는 방법은 무엇입니까? 이 작업은 이전 버전의 Vue에서 매우 사소한 것이었지만 지금은 더 복잡합니다. 테이블에 데이터를 표시하고 있습니다.

<tr v-for="person in filterPeople"> 
    <td>{{person.name}}</td> 
    <td>{{person.age}}</td> 
</tr> 

및 이름과 나이를 필터링 할 수있는 입력 필드가 있습니다. 내가 뭘 잘못하고 있는지 잘 모르겠다.

computed: { 

    filterPeople: function(){ 
    var self = this 
    return this.people.filter(function(p){ 
     return p.name.indexOf(self.searchDetails) > - 1 
    }) 
    } 
} 

입력 할 때 입력으로 입력하면 사람 이름이나 나이별로 예상대로 필터링되지 않는다. 데모 : http://codepen.io/p-adams/pen/AXPKko

Answer 1

문제는 정말 간단합니다. 테이블 내부에서 입력 태그를 사용 중입니다. 포함 된 div 태그를 추가하십시오. 앱 ID를 입력하고 입력 요소를 입력하십시오. 이렇게하면 문제가 해결됩니다. 뷰는 여전히 HTML의 규칙의 일부 및 그 중 하나에 의해 제약을

<div id="app"> 
    <input 
     class="form-control" 
     v-model="searchDetails" 
     placeholder="filter by name or age" 
     > 
    <table class="table table-striped" > 
     <thead> 
     ...rest of code 

테이블 태그 직접 아이들과 같은 특정 태그 만이있을 수 있습니다.