Kann die Argumente in Filter [VueJS] nicht verstehen

Question

Da ich die VueJS Filter(orderby) API doc gelesen habe und ich finde es schwierig, die Argumente zu verstehen. Unten ist die Probe

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

Jede Antwort ist groß!

Answer 1

Wie in der Doc erklärt, ist der Filter filterBy auf Richtlinien beschränkt, die Array Werte erwarten, z.B. v-for.

Und für die argumente:

• Für targetStringOrFunction arg:

Unter der Annahme, dass wir ein Array von Strings haben, und Sie wollen, dass es filtern, nach einem Wert fro einen Eingang zum Beispiel um dieses Ziel achive können Sie filterBy wie folgt verwenden:

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

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

In der HTML:

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

Sie können die searchedValue an einen Eingang binden einen Effekt hinzuzufügen.

Für den Funktionsteil siehe das Beispiel unten.

• Für in und {String} [...searchKeys] argumente:

Unter der Annahme, dass wir eine Reihe von Benutzern haben, und in dem Benutzerobjekt haben wir eine firstName und eine lastName Eigenschaften und Sie wollen es filtern Gemäß einem Wert, um dieses Ziel zu erreichen, können Sie filterBy wie folgt verwenden:

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

Oder Sie können in mehreren Schlüsseln suchen:

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

Und Sie können eine Funktion erstellen, wickeln Sie den Code wie folgt:

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 
     } 
    }, 
}) 

Hope that :)