On-Click-Funktion in Vue-Tabellen-2 werfen fns.apply ist keine Funktion

Question

Ich implementiere derzeit Vue-Tabellen-2 (zum ersten Mal) und ich habe eine Vorlage eingerichtet, um ein Symbol zu zeigen, das ein feuert Ereignis beim Klicken. Allerdings bekomme ich einen Fehler, von dem ich nicht sicher bin, woher er stammt. Der Fehler ist der folgende.

Uncaught TypeError: fns.apply is not a function 
at HTMLAnchorElement.invoker (vue.esm.js:1821) 



templates: { 
     edit: function (h, row) { 
     return <a href='javascript:void(0);' on-click='$parent.editSchedulesBtn(${row.id})' ><i class='fa fa-pencil-square fa-2x' aria-hidden="true"></i></a> 
     } 

Der Funktionscode selbst ist wie folgt.

editSchedulesBtn: function (rowId) { 
    console.log(rowId) 
} 

Ich habe diese Frage Stackoverflow fand es versucht haben, die Umsetzung, aber kein Erfolg ->How to bind vue click event with vue tables 2 (JSX)?

Vielen Dank für alle Unterstützung im Voraus.

Answer 1

Ich sehe ein paar Probleme:

Ein Syntaxfehler:

Statt

edit: function (h, row) { 
     return <a href='javascript:void(0);' on-click='$parent.editSchedulesBtn(${row.id})' ><i class='fa fa-pencil-square fa-2x' aria-hidden="true"></i></a> 
     } 

werden sollten:

edit: function (h, row) { 
     return <a href='javascript:void(0);' on-click={this.$parent.editSchedulesBtn(row.id)}><i class='fa fa-pencil-square fa-2x' aria-hidden="true"></i></a> 
     } 

Zweitens, die this Kontext innerhalb der Funktion verweist an die root-vue-Instanz, wie in der Dokumentation angegeben:

In addition a this context will be available, which refers to the root vue instance.

So ist die $parent veraltet. Je nach App-Struktur müssen Sie möglicherweise sogar $children oder $refs verwenden (Durchsuchen Sie die Struktur mithilfe der Chrome-Entwicklungstools und finden Sie die genaue "Adresse").

Drittens, wenn ein Ereignis mit jsx Bindung sollten Sie nicht die Methode direkt aufrufen, sondern verwenden Sie die bind Methode stattdessen verwenden (wie im answer erklärt Ihnen angeschlossen haben):

on-click={this.editSchedulesBtn.bind(this, row.id)} // See the aforementioned answer for ES6 syntax 

Als beiseite, da Vue Einführung von Scoped-Slots in v2.1, ist es am besten zu use those anstatt jsx, die Kompilierung erfordert, und ist im Allgemeinen mehr umständlich zu behandeln.