Wie filtert man ein Array mit einer berechneten Eigenschaft?

Question

Wie filtere ich ein Array mithilfe einer berechneten Eigenschaft in Vue.js 2.0? Diese Aufgabe war in älteren Versionen von Vue ziemlich trivial, aber jetzt ist es mehr beteiligt. Ich zeige Daten in einer Tabelle an:

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

und ich habe ein Eingabefeld, in dem ich die Namen und das Alter filtern kann. Ich bin nicht sicher, was ich hier falsch mache:

computed: { 

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

Wenn ich in der Eingabe gebe es die Leute nicht nach Namen oder Alter nicht filtert, wie ich erwarte. Demo: http://codepen.io/p-adams/pen/AXPKko

Answer 1

Ihr Problem ist wirklich einfach. Sie verwenden ein Eingabe-Tag innerhalb einer Tabelle. Versuchen Sie, ein enthaltendes div-Tag hinzuzufügen. Geben Sie ihm die App-ID und fügen Sie das Eingabeelement ein. Dies sollte das Problem beheben.

<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 

Vue noch durch einige der Regeln von HTML und einer von denen, beschränkt ist, ist Tabellen-Tags nur bestimmte Tags als direkte Kinder haben.