2

我正在尝试发现这个 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>
4

1 回答 1

2

在阅读了已弃用的 Vue-tables 版本之后......我发现这个事件只在服务器端触发......而不是客户端......文档缺少很多示例并且对于 Vue.js 来说很难理解新人...

vue-tables.loaded（服务器端）

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

于 2017-11-24T18:08:57.217 回答