模板內函數調用

我有一個簡單的表分頁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但是那裏的幫助並沒有幫助我。我無法弄清楚如何在我的例子中實現解決方案。

來源

2017-04-25 Vladimir Sabo

只要做到這一點的CSS，你不需要這裏的任何代碼：'TR：懸停TD {背景：紅色; }'。 – dfsq

啊，它的工作。我仍然想要一個實際的解決方案，因爲我需要這個爲其他的東西工作。 –

任何時候你想要一個組件有權訪問父項中的某些東西，將它作爲道具傳遞。

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>

來源

2017-04-25 12:16:25

模板內函數調用

回答

相關問題