javascript - 如何使用Vue过滤结果 "live"？

Question

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

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

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;