Перезагрузить данные vue-tables-2 (Vuex)

Модуль: https://github.com/matfish2/vue-tables-2.

Я создаю приложение CRUD. Как я могу перезагрузить данные, полученные с помощью вызова Ajax, в vue-tables-2? Я хотел перезагрузить таблицу после выполнения инструкции обновления где-нибудь в моем приложении.

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);
        }
    }
}

person Kay Singian    schedule 29.11.2017    source источник
comment
было бы полезно, если бы вы включили свой JSON. Соответствует ли это спецификации здесь: github.com/matfish2/vue-tables- 2 # на стороне сервера   -  person tyskr    schedule 29.11.2017
comment
@ 82Tuskers Я добавил код, см. Выше. Что я сейчас делаю, так это добавляю v-if в таблицу, когда я запускаю оператор UPDATE, я затем устанавливаю v-if на false, а затем снова устанавливаю его на true через 250 секунд. Не знаю, есть ли способ лучше   -  person Kay Singian    schedule 29.11.2017
comment
Вы можете попробовать запустить this.$forceUpdate() после выполнения инструкции UPDATE   -  person Jpod    schedule 29.11.2017
comment
Есть метод refresh (), но я пока не знаю, как использовать ref, который требуется в документации (github.com/matfish2/vue-tables-2#methods). Я не уверен, что это тоже обновляет данные.   -  person Kay Singian    schedule 29.11.2017


Ответы (2)


Как указано в документации, вы должны использовать метод refresh. Вы можете прочитать о refs здесь

<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();
    }
}
person Matanya    schedule 29.11.2017
comment
Я делаю это, и обновление не запускается. Сетка работает нормально, console.log (grid.refresh) показывает, что она существует и находится в области видимости, но на самом деле обновление не происходит - person Daniel; 22.10.2019

для перезагрузки vuetable с обновленными данными у вас есть два способа:

1.

выберите компонент vuetable с помощью $ refs в вашем коде, а затем вызовите метод обновления, примерно так: файл html:

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

js файл:

this.$refs.userAdminVueTable.refresh()

2. Когда у вас есть данные, вы можете вызвать метод setData для своего vuetable.

  this.vuetable.setData(updatedData);

Ниже я напишу вам пример, вы можете вдохновиться этим:

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