Zugriff auf Vue-Instanz/Daten innerhalb der Filtermethode

Question

Ich versuche auf die Vue-Instanzdaten innerhalb der Filterfunktion wie folgt zuzugreifen. JS: -

new Vue({ 
data:{ 
    amount: 10, 
    exchangeRate:50 
}, 
el:"#app", 
filters:{ 
    currency: function(amount){ 
      console.log(this); 
      //return amount * this.exchangeRate; 
      return amount *50; 

    } 
} 
}) 

HTML:

<div id="app"> 
{{ amount | currency}} 
</div> 

Mein Ziel ist es return amount * this.exchangeRate; zu verwenden, aber this zu window hier gleich ist. Wie kann ich das tun? Danke. jsfiddle

Answer 1

Laut Evan, dem Schöpfer von Vue:

Verwenden Methoden in erster Linie für die staatlichen Veränderungen auslösen. Wenn Sie eine Methode aufrufen, bedeutet dies im Allgemeinen einige Nebeneffekte.

Verwenden Sie Filter hauptsächlich für einfache Textformatierungen, die in Ihrer gesamten App wiederverwendet werden müssen. Filter sollten rein sein - keine Nebenwirkungen, nur Daten rein und Daten raus.

Verwenden Sie berechnete Eigenschaften für lokale, komponentenspezifische Datentransformationen. Ähnlich wie bei Filtern sollten die berechneten Getter rein sein.

Es gibt einen speziellen Fall, in dem Sie etwas mit einer Scope-Variablen berechnen möchten, die nur in der Vorlage verfügbar ist (z. B. ein v-for-Alias). In solchen Fällen können Sie "helper methods" verwenden Berechnen Sie etwas, indem Sie Argumente übergeben.

(Quelle: https://forum-archive.vuejs.org/topic/830/method-vs-computed-vs-filter/2)

So, da der Filter auf der Komponente abhängt, ich glaube, Sie eine berechnete Eigenschaft in diesem Fall anstelle eines Filters verwenden soll.

Answer 2

Ich sehe, es gibt zwei Optionen, die Sie haben, verwenden Sie entweder eine Methode/berechnete Eigenschaft oder übergeben Sie zusätzliche Parameter zu filtern. Sie können nicht this innerhalb Filter zugreifen, als Zweck der Filter wie Text Transformation einfach, etc. aus dem docs:

Filter sind für Textverarbeitungszwecke in erster Linie entwickelt. Für komplexere Datentransformationen in anderen Anweisungen sollten Sie stattdessen die berechneten Eigenschaften verwenden.