템플릿 내 함수 호출

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>