vue 2.0 中的自定义过滤器 returns 无

Question

我正在尝试构建一个自定义过滤器，returns 匹配输入的项目。它适用于 ['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() 通常会 return [object Object]，所以它对过滤任何东西都没有多大用处。您可能期望得到一个 JSON 输出，您可以使用 JSON.stringify(someObject)，但更好和准确的方法是访问该特定密钥。

您可以修改函数如下：

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

    },

vue 2.0 中的自定义过滤器 returns 无

Custom filter in vue 2.0 returns nothing

javascript

vue.js

vuejs2