Question

当我阅读VueJS Filter(orderby) API文档时我发现很难理解args。以下是样本

Arguments:
   {String | Function} targetStringOrFunction
   "in" (optional delimiter)
   {String} [...searchKeys]

任何答案都很棒！

Answer 1

正如Doc中所述，过滤器filterBy仅限于期望Array值的指令，例如v-for。

对于args：

对于targetStringOrFunction arg：

假设我们有一个字符串数组，并且您希望根据输入的值过滤它，例如，要实现此目标，您可以使用filterBy，如下所示：

    new Vue({
    el: '...',

    data: {
        searchedValue: '' // keeping it empty will simply show all results
    }
    ...
});

在HTML中：

<div v-for="value in values | filterBy searchedValue">

您可以将searchedValue绑定到输入以添加效果。

有关功能部分，请参阅下面的示例。

适用于in和{String} [...searchKeys] args：

假设我们有一个用户数组，并且在用户对象中我们有firstName和lastName属性，并且您希望根据值对其进行过滤，以实现此目标像这样使用filterBy：

<div v-for="user in users | filterBy searchedValue in 'firstName'">

或者您可以搜索多个键：

<div v-for="user in users | filterBy searchedValue in 'firstName' 'lastName'">

你可以创建一个函数来包装你的代码：

var demo = new Vue({
    el: '#demo',
    data: {
        searchedValue: '',

        users: [
          {firstName: 'Jhone', lastName:'Doe'},
          {firstName: 'Daved', lastName:'Bazz'},
          {firstName: 'Pieter', lastName:'Foo'},
        ]
    },
    methods: {
      myFilter: function(user) {
          return user.firstName == searchedValue; //Or what erev you want here
      }
    },
})

希望肝脏：）

无法理解过滤器中的参数[VueJS]

1 个答案: