javascript - vue 2.0 中的自定义过滤器不返回任何内容

Question

我正在尝试构建一个自定义过滤器，该过滤器返回与输入匹配的项目。 它适用于简单数组，例如 ['Apple', 'Banana', 'Cupple']。 但不包含对象数组(我试图用它来过滤包含用户信息的数组)

 filterBy: function (arr, value) {
              return arr.filter(function(item) {
                item = item.toString();
                  return item.indexOf(value) > -1;
          })

    },

在我的模板中

            <input v-model="userInput" />

            <h2> Customer: </h2>
            <ul v-for="customer in filterBy(customers, userInput)">
                <li>{{customer.name}}</li>
            </ul>

编辑:这就是数据的样子。

     "data":[{"id":"9","name":"missy","phone":"21324234532"},     
     {"id":"3","name":"Mahama","phone":"345604542"}]

如何获取与给定输入匹配的客户？

Answer 1

假设您的对象数组如下所示:

[
  {"id":"9","name":"missy","phone":"21324234532"},   
  {"id":"3","name":"Mahama","phone":"345604542"},
  {"id":"2","name":"Bernard","phone":"241242542"}
]

正如评论中所指出的:someObject.toString()通常会返回[object Object]，因此它对于过滤任何东西来说并不是真正有用。您可能期望 JSON 输出，您可以使用 JSON.stringify(someObject) 获得该输出，但更好、更准确的方法是访问该特定 key 。

您可以像下面这样修改函数:

 filterBy: function (arr, value) {
              return arr.filter(function(item) {
                  return item.name.indexOf(value) > -1;
          })

    },