テンプレート内での関数呼び出し

Question

私はテーブルのページ付けを単純にするためのvueコンポーネントを持っています。私は上記のマウスの上のテーブルの行を強調表示する必要があります。私がこれまで行ったことは、テンプレートを作成し、動的にロードされたAJAXの次と前のボタンを作成することです。問題は、その動的要素のために強調表示されていることです。ここで

は、テンプレートのコードです：

<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> 

そしてVUEコード：

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

    } 
    }); 

問題は、私は任意の行にカーソルを合わせると、私はエラーを取得する次のとおりです。

Uncaught TypeError: scope.highlightRow is not a function 

今私は（多かれ少なかれ）なぜこれが起きているのか理解しています、私はテンプレートタグ内の関数を呼び出しています。それが動作する要素の例）。いくつかの研究はこの質問に私を導くdynamical appended vuejs content: scope.test is not a functionしかし、助けが私を助けなかった。私は私の例にソリューションを実装する方法を理解できませんでした。

Answer 1

コンポーネントが親から何かにアクセスできるようにしたい場合はいつでも、それを支柱として渡します。

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>