Funktionsaufruf in einer Vorlage

Question

Ich habe eine Vue-Komponente für die einfache Paginierung einer Tabelle. Ich muss eine Zeile der Tabelle mit der Maus markieren. Was ich bisher gemacht habe, ist das Erstellen der Vorlage und das Erstellen der dynamisch geladenen Ajax powered next und previous Buttons. Das Problem ist, dass Hervorhebung, weil es ein dynamisches Element ist. Hier

ist der Template-Code:

<tbody class="table-body"> 
    <template id="template-student"> 
     <tr @mouseover="highlightRow()" class="students-row" data-student-url="{{ URL::route("student", 1) }}"> 
      <td> 
       <div class="student-image"> 
        <div class="flag"></div> 
       </div> 
      </td> 
      <td> 
       <a href="">@{{ student.student_firstname }}</a> 
      </td> 
      <td> 
       <a href="">@{{ student.student_lastname }}</a> 
      </td> 
      <td> 
       @{{ student.student_telephone }} 
      </td> 
      <td> 
       @{{ student.student_fathersname }} 
      </td> 
     </tr> 
    </template> 
</tbody> 

Und der vue Code:

Vue.component('student', { 
    template: '#template-student', 
    props: ['student'], 
    }); 
    new Vue({ 
    el: '#app', 
    data: { 
     students: [], 
     pagination: {} 
    }, 
    ready() { 
     this.fetchStudents(); 
    }, 
    methods: { 
     fetchStudents(pageNumber) { 
     if (pageNumber === undefined) { 
      pageNumber = 1; 
     } 
     const vm = this; 
     const pageUrl = `/api/on-roll/all/${pageNumber}`; 
     this.$http.get(pageUrl) 
      .then((response) => { 
       vm.makePagination(response.data.pagination); 
       vm.$set('students', response.data.data); 
     }); 

     }, 
     makePagination(data) { 
     const pagination = { 
      current_page: data.current_page, 
      total_pages: data.total_pages, 
      next_page: data.next_page, 
      prev_page: data.prev_page 
     }; 
     this.$set('pagination', pagination); 
     }, 
     highlightRow(){ 
     console.log("test") 
     } 

    } 
    }); 

Das Problem ist, wenn ich über jede Zeile schweben bekomme ich einen Fehler:

Uncaught TypeError: scope.highlightRow is not a function 

Jetzt verstehe ich (mehr oder weniger), warum das passiert, ich rufe eine Funktion innerhalb der Template - Tags auf (wenn ich draußen auf einer Beispielelement funktioniert es). Einige Recherchen führten mich zu dieser Frage dynamical appended vuejs content: scope.test is not a function Aber die Hilfe dort hat mir nicht geholfen. Ich konnte nicht herausfinden, wie ich die Lösung für mein Beispiel implementieren sollte.

Answer 1

Immer wenn Sie möchten, dass eine Komponente Zugriff auf etwas von einem Elternteil hat, übergeben Sie es als Requisite.

new Vue({ 
 
    el: '#app', 
 
    components: { 
 
    myComponent: { 
 
     template: '<div @mouseover="onHover">Hi</div>', 
 
     props: ['onHover'] 
 
    } 
 
    }, 
 
    methods: { 
 
    highlightRow() { 
 
     console.log('test'); 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script> 
 
<div id="app"> 
 
    <my-component :on-hover="highlightRow"></my-component> 
 
</div>