Javascript 如何使用多个观察者在VueJS中筛选列表

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

我正试图用虚拟数据在JSBin上为此准备一个小演示：

我有一些数据，我有两个观察者

codesearch

和

typesearch

问题

我希望在列表中键入内容时对其进行筛选

如何使数据输入两个观察程序时，过滤器考虑两个输入。例如，在本演示中，如果用户在

type

中输入

actor

，在

code

中输入三个

，则只应显示一个列表项

标记更改：

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

{{item.name}}

谢谢，这很有效。我想弄明白这件事。您制作两份数据副本（

items

或

filteredItems

）有什么原因吗？我不知道如何在数据声明中引用原始副本，否则我会这样做。如果不复制，则最初会有一个空列表，因为视图现在引用的是已筛选的列表。在现实世界中，您无论如何都不会使用数组文字，因此两个列表都会引用表示数据的变量。是的，在现实世界中，我的数据将作为API调用来自服务器。那么，在这种情况下，这会起作用，好吗？这是一个非常简单的实现。我不会像在生产中那样使用它，但这有利于学习。使用计算机将是更好的方法。

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