重新加载 vue-tables-2 (Vuex) 的数据答案

【问题标题】：Reload Data of vue-tables-2 (Vuex)重新加载 vue-tables-2 (Vuex) 的数据
【发布时间】：2018-05-12 15:47:37
【问题描述】：

模块：https://github.com/matfish2/vue-tables-2

我正在创建一个 CRUD 应用程序。如何在 vue-tables-2 中重新加载通过 Ajax 调用获取的数据？我想在我的应用程序某处执行更新语句后重新加载表。

Vue-tables 在我的设置中使用 vuex。

<v-server-table 
    name="UserAdmin" url="admin/master/?format=json" :columns="columns" :options="options">
</v-server-table>

编辑：为数据属性添加了表格的 Javascript 代码。

export default {
    data() {
        return {
            columns: ['ID','NAME', 'POSITION', 'APPLICATIONS','DESCRIPTION','STATUS','ENCODED_BY'],
            options: {
                responseAdapter: (resp) => {
                    resp = resp.map(item => ({ 
                        ID: item.ID,
                        FK_ID: item.FK_ID,
                        NAME: `${item.FIRSTNAME} ${item.LASTNAME}`, 
                        POSITION: item.POSITION,
                        APPLICATIONS: item.APPLICATIONS,
                        DESCRIPTION: item.DESCRIPTION,
                        STATUS: item.STATUS,
                        ENCODED_BY: item.ENCODED_BY,
                        TOTAL: item.TOTAL
                    }));
                    let count;
                    if(resp[0] != null) {
                        count = resp[0]['TOTAL']
                    }
                    else {
                        count = 0
                    }
                    return { 
                        data: resp,
                        count: count
                    }
                },
                headings: {
                    'ID': <span># &nbsp;</span>,
                    'NAME':'Name', 
                    'POSITION':'Position', 
                    'APPLICATIONS':'Applications', 
                    'DESCRIPTION':'Description', 
                    'STATUS': 'Status', 
                    'ENCODED_BY':'Encoded By', 
                    'edit': 'Options'
                },
                columnsClasses: {
                        ID: 'col-md-1',
                        NAME:'col-md-2 pointer',
                        POSITION: 'col-md-2',
                        APPLICATIONS: 'col-md-2',
                        DESCRIPTION: 'col-md-2',
                        STATUS: 'col-md-1',
                        ENCODED_BY: 'col-md-2',
                },
                templates: {
                    NAME: (h, row) => {
                        return <a on-click={ () => this.setUpdateID(row) }>{row.NAME}</a>
                },
                APPLICATIONS: (h,row) => {
                    return (<ul>{JSON.parse(row.APPLICATIONS).map((val)=>(<li>{val}</li>))}</ul>);
                },
                STATUS: (h, row) => {
                    if(row.STATUS == 1) {
                        return <span class="label label-success">Active</span>
                    }
                    else if(row.STATUS == 0) {
                        return <span class="label label-danger">Inactive</span>
                    }
                }
                },
            },
        }
    },
    methods: {
        setUpdateID: function(row) {
            this.$store.commit('SET_UPDATE_ID', row.FK_ID);
        }
    }
}

【问题讨论】：

如果你包含你的 JSON 将会很有用。它是否符合此处的规范：github.com/matfish2/vue-tables-2#server-side
@82Tuskers 我添加了代码，请看上面。我现在正在做的是在表中添加一个 v-if，当我运行 UPDATE 语句时，我将 v-if 设置为 false，然后在 250 秒后再次将其设置为 true。不知道有没有更好的办法
您可以在运行 UPDATE 语句后尝试运行 this.$forceUpdate()
有一个 refresh() 方法，但我不知道如何使用文档所要求的“ref”（github.com/matfish2/vue-tables-2#methods）。我不确定这是否也会刷新数据。

标签： vue.js vuejs2 vuex vue-tables-2

【解决方案1】：

如文档所述，您应该使用refresh 方法。你可以阅读refshere

<v-server-table ref="table"
    name="UserAdmin" url="admin/master/?format=json" :columns="columns" :options="options">
</v-server-table>

Javascript：

methods:{
   onUpdate() {
     this.$refs.table.refresh();
    }
}

【讨论】：

我正在这样做并且没有触发刷新。网格工作正常，console.log(grid.refresh) 显示它存在并且在范围内，但实际上没有刷新

【解决方案2】：

要使用更新的数据重新加载 vuetable，您有两种方法：

在代码中选择带有 $refs 的 vuetable 组件，然后调用 refresh 方法，如下所示： html文件：

 <v-server-table  ref="userAdminVueTable"
    name="UserAdmin" url="admin/master/?format=json" :columns="columns" :options="options">

js文件：

this.$refs.userAdminVueTable.refresh()

2。获得数据后，您可以为 vuetable 调用 setData 方法。

  this.vuetable.setData(updatedData);

下面我为你写了一个例子，你可以从中得到启发：

     this.Service.GetAllRecords().then(result => {
      this.vuetable.setData(result);
    }).catch(e => {
      this.showAlert = true  
      this.message = ` Exception : ${e}`
    })
  }

【讨论】：

【解决方案3】：

你不需要刷新它，如果你刷新状态就会很清楚。您可以使用以下示例

methods:{
   onUpdate(rowIndex) {
     this.$refs.table.data.splice(rowIndex, 1);
    }
}

<v-server-table ref="table"
    name="UserAdmin" url="admin/master/?format=json" :columns="columns" :options="options">
</v-server-table>

【讨论】：