Question

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

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

我有一些数据，我有两位观察员codesearch和typesearch。

问题

我希望在我输入内容时过滤列表。
如何进行此操作以便在两个观察者中输入数据时，过滤器会同时考虑两个输入。例如，在此演示中，如果用户在actor中输入type，在three输入code，则只显示一个列表项。

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>

如何使用多个观察者过滤VueJS中的列表

1 个答案: