VueJs 中的 vuetable-2 不会从父组件中获取数据

Question

问题如下： 我使用 vuetable-2 包 (https://github.com/ratiw/vuetable-2) 进行表格格式化和分页。 获取数据的标准方法是使用“api-url”属性并定义精确传递：

<template>
  <vuetable ref="vuetable"
    api-url="https://vuetable.ratiw.net/api/users"
    :fields="['name', 'email', 'birthdate']"
  ></vuetable>
</template>

但是如果我想从 data() 函数中获取数据怎么办。像这样的：

data() {
    return {                       
           users: [],
           }
       }

所以首先我想获取数据，使用带有方法的 xhttp 请求：

getUsers() {                    
                this.$http.get(hostname + 'name=person_list&session_id=' + sessionApiId).then(response => {
                    this.users = connectionService.renderMultipleInstances(response.body);
                }, response => {
                    // error callback
                });
            },

数据需要使用connectionService类进行格式化。

然后我需要将它传递给表，但没有传递任何内容，但是在文档 (https://github.com/ratiw/vuetable-2/wiki/Vuetable-Data) 中说明如下：

tableData 在 api 模式下，它存储从 成功的 AJAX 请求后的服务器。否则，它存储数据 通过 data prop 或 setData 方法分配。 Vuetable 总是使用 tableData 用于表格渲染。

如何将用户传递给 vuetable。

Answer 1

您可以在此处阅读文档： https://github.com/ratiw/vuetable-2/blob/develop/docs/Vuetable-Properties.md#-http-fetch-v17

模板：

<template>
  <vuetable ref="vuetable"
  :http-fetch="getUsers"
  :fields="['name', 'email', 'birthdate']"
></vuetable>
</template>

脚本

methods: {
  getUsers() {
   ...
  },
}