如何在 VueJS 中过滤具有多个观察者的列表

Question

这是我第一次使用 VueJS。我正在尝试构建一个页面，该页面在右侧显示数据，并在左侧有几个控件(复选框，下拉列表，输入文本(。选择/输入左侧控件时，将过滤右侧的数据。

我正在尝试在 JSBin 上准备一个带有虚拟数据的小型演示：http://jsbin.com/qujaraf/edit?html,js,console,output

我有一些数据，我有两个观察者codesearch和typesearch。

问题

1. 我希望在我在其中键入内容时过滤列表。
2. 我怎样才能做到当数据在两个观察器中输入时，过滤器会考虑两个输入。例如，在此演示中，如果用户在type中输入actor并在code中输入three，则只应显示一个列表项。

Answer 1

http://jsbin.com/huteyasuto/1/edit?html,js,console,output

data: {
typesearch: '',
codesearch: '',
processingmsg: 'waiting for you...',
items: [
{name: 'Stackoverflow', type: 'development', code: "one"},
{name: 'Game of Thrones', type: 'serie', code: "two"},
{name: 'Jon Snow', type: 'actor', code: "three"}
],
filteredItems: [
{name: 'Stackoverflow', type: 'development', code: "one"},
{name: 'Game of Thrones', type: 'serie', code: "two"},
{name: 'Jon Snow', type: 'actor', code: "three"}
]
},
// trigger filter on either input
watch: {
typesearch: function () {
this.processingmsg = "processing type...";
this.filteredItems = this.filterItems()
},
codesearch: function () {
this.processingmsg = "processing code...";
this.filteredItems = this.filterItems()
}
},
// filter the list based on typesearch, then on codesearch               
methods: {
filterItems: function() {
return this.items.filter(item => {
return (
(item.type.indexOf(this.typesearch.toLowerCase()) > -1)
);
}).filter(item => {
return (item.code.indexOf(this.codesearch.toLowerCase()) > -1)
})
}
}  

标记更改：

<div v-for="item in filteredItems" >
<p>{{item.name}}<p>
</div>