Question

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

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

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

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

return data

});

Answer 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;

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

1 个答案: