如何使用 Vue “实时”过滤结果？

【问题标题】：How can I filter results "live" with Vue?如何使用 Vue “实时”过滤结果？
【发布时间】：2016-06-23 06:07:19
【问题描述】：

我有一个输入 v-model，我想过滤一个产品列表。

这是我的过滤器。问题是它只有在项目名称与输入完全匹配时才有效。如何修改过滤器以在输入输入时查看任何部分匹配项？

Vue.filter('byName', function (data, input) {

if(input){
    return data.filter(function (item) {
        return item.name == input
    });
}

return data

});

【问题讨论】：

不清楚你在问什么。解释“只有匹配的产品才能上线”...
您可能正在寻找String.prototype.indexOf() 或String.prototype.includes() 方法。
如果您认为我的解决方案有用，请点赞：D。给unicorn dollars 提供帮助的答案是一种很好的礼仪

标签： javascript json vue.js

【解决方案1】：

如果您想查看“实时”结果，则需要对过滤器进行编码，使其返回部分匹配的项目。

最简单的方法是使用startsWith() 方法。以下过滤器使用startsWith() 匹配所有以输入开头的项目：

Vue.filter('byName', function (data, input) {
  if(input){
    return data.filter(function (item) {
      // we check if the item's name starts with the input
      return item.name.startsWith(input);
    });
  }
  return data
});

Here is a JSFiddle 该过滤器正在运行。

另一方面，如果您想返回匹配任何地方的项目，而不仅仅是以输入开头的项目，您可以使用String.prototype.indexOf()。

为此，请替换

// we check if the item's name starts with the input
return item.name.startsWith(input);

与

// we check if the item's name contains the input as a substring
return item.name.indexOf(input) > -1;

【讨论】：