模板内函数调用

我有一个简单的表分页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

模板内函数调用

回答

相关问题