Question

我有一个用于简单分页的vue组件。我需要在鼠标悬停上突出显示一行所述表格。到目前为止我所做的是创建模板并创建动态加载的ajax驱动的next和previous按钮。问题在于突出显示，因为它是一个动态元素。

以下是模板代码：

<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

只要您希望组件可以访问父组件中的某些内容，请将其作为prop传递。

＆＃13;

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

＆＃13;

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

＆＃13;

函数调用模板内部

1 个答案: