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

【问题标题】：Custom filter in vue 2.0 returns nothingvue 2.0 中的自定义过滤器不返回任何内容
【发布时间】：2017-01-01 02:22:07
【问题描述】：

我正在尝试构建一个自定义过滤器，以返回与输入匹配的项目。它适用于简单的数组，例如['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"}]

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

【问题讨论】：

你的对象数组是什么样子的？
我已经添加了。我打算使用电话作为搜索输入，但返回客户姓名。

标签： javascript vuejs2 vue.js

【解决方案1】：

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

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

正如 cmets 中指出的那样：someObject.toString() 通常会返回 [object Object]，因此它对于过滤任何内容都不是很有用。您可能希望得到一个 JSON 输出，而您可以使用 JSON.stringify(someObject) 得到它，但更好、更准确的方法是访问该特定密钥。

你可以像下面这样修改函数：

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

    },

【讨论】：

哇这太甜了！谢谢。所以我需要更深入地获得我需要的特定密钥？
@BernardParah someObject.toString() 通常会返回 [object Object]，所以它对于过滤任何东西都不是很有用。您可能期望那里有 JSON 输出，在这种情况下，您必须执行 JSON.stringify(someObject)。但无论如何，直接进入成员值是更好的方法。
感谢您的洞察力！ @poke。