TypeError: this.decodeHtml ist keine Funktion

Question

Ich bin gerade auf VueJS 2 migriert, und jetzt habe ich ein Problem.

In einem Filter, ich eine benutzerdefinierte Funktion aufrufen, aber ich bekomme: TypeError: this.decodeHtml is not a function

Hier ist mein Code:

new Vue({ 
     el: '#modal', 
     data: {...} 
     computed: {...} 
     methods: { 
       decodeHtml: function decodeHtml(html) { 
         var txt = document.createElement("textarea"); 
         txt.innerHTML = html; 
         return txt.value; 
        }, 
     ... }, 
     filters: { 
        html: function html(_html) { 
         return this.decodeHtml(_html); 
        } 
       } 

in meinem HTML, ich nenne es: @{{ categoryFullName | html }}

Jede Idee Warum??? Vor der Migration funktionierte es gut.

Hier ist die fiddle

Answer 1

Sie ein Problem mit Rahmen haben. Auf Ihrer html Funktion ist die this Variable ein Window Objekt und kein Vue Objekt, wie es sein sollte.

Die Problemumgehung, die Sie tun können, ist, anstatt die Funktion decodeHtml aufzurufen, die Sie in Ihrem Filter implementieren. Gefällt mir:

filters: { 
    html: (html) => { 
    var txt = document.createElement("textarea"); 
    txt.innerHTML = html; 
    return txt.value; 
    } 
}