Question

我正在尝试发现这个matfish2 / vue-tables-2组件，基本用法很好，但是尝试阅读文档中的漏洞很棘手... Google上的几个例子......

在文档中，它声明：

事件

Using Custom Events (For child-parent communication):

<v-server-table :columns="columns" url="/getData" @loaded="onLoaded"></v-server-table>
Using the event bus:
Event.$on('vue-tables.loaded', function (data) {
    // Do something
});

所以我在我的UsersPage.vue

中尝试过

<template>
  <div id="users" class="container">
    <div class='users'>
      <v-client-table :data='tableData' :columns='columns' :options='options' @loaded="onLoaded"></v-client-table>
    </div>
  </div>
</template>


<script>
import { Event } from 'vue-tables-2'
export default {
  name: 'UsersPage',
  data () {
    return {
      columns: ['id', 'firstName', 'lastName', 'email', 'birthday'],
      tableData: [ ... ],
      options: {
        perPage: 5,
        perPageValues: [ 5, 10, 15, 20 ]
      }
    }
  },
  ready: function () {
    Event.$on('vue-tables.loaded', (data) => {
      console.log('Loaded...')
    })
  }
}
</script>

但它不起作用......我哪里错了？如何查看这些活动？感谢您的反馈

更新

我想修改我的UsersPage脚本如下，没有错误，但也没有控制台日志......

<script>
import Vue from 'vue'
import { Event } from 'vue-tables-2'
Vue.use(Event)
export default {
  name: 'UsersPage',
  data () {
    return {
      columns: ['id', 'firstName', 'lastName', 'email', 'birthday'],
      tableData: [ ... ],
      options: {
        perPage: 5,
        perPageValues: [ 5, 10, 15, 20 ]
      }
    }
  },
  created () {
    Event.$on('vue-tables.loaded', function (data) {
      console.log('Loaded...')
      console.log('My event has been triggered', data)
    })
  },
  methods: {
    onLoaded ($event) {
      console.log('My event caught in global event bus', $event)
    }
   }
  }
</script>

Answer 1

在阅读了已弃用的Vue-tables版本之后......我发现这个事件只在服务器端被解雇...而不是客户端...... 文档缺少很多示例，很难理解Vue.js的新成员......

vue-tables.loaded（服务器端）

将响应数据附加到表后触发。通过回复发送。

Vue-tables-2网格组件用法，如何使用Event总线？

1 个答案: