Data Table doesn't refresh after update

[Sancho66]

Hi guy,

First , thanks for your work , it is very good. I have one problem with data table when I update a row in the table.

My "data table" is a getter object in vuex and when I use the mutation "UPDATE_TABLE" to update one row in the data table object , the table render does not take into account the update. I checked my data Table and it is well updated.

After update, Curiously , when I click on filters on my table, the table render take into account the update.

Can you see this ?

Thank you.

[njleonzhang]

@Sancho66 Can you show me your sample code?

[Sancho66]

tab-properties-list.vue

<template>

    <div>
        <data-tables
                :data="tableInit"
                border
                class="propertyList"
                style="width: 100%"
                maxHeight="500"
                @row-click="handleEdit"
                :search-def="searchDef"
                :has-action-col="false"
                >...</data-tables>

<script type="text/babel">

    import { mapGetters, mapActions } from 'vuex'
    import Vue from 'vue'
    import moment from 'moment'
    import {  getObjectsLabelsInDictionnaryByType } from '../../utils/mainFunction'
    import DataTables from 'vue-data-tables'
    Vue.use(DataTables)

    var firstBy = require('thenby');
    var thenBy = require('thenby');

    export default {
        data(){
            return {
                loading: true,
                columns: ['id', 'mandateNumero', 'status', 'mainProperty_type', 'description', 'price', 'dateCreated','dateUpdated','isRent','action'],
                tableData: [],
                searchDef:{
                    show: false
                }

            }
        },
        name: 'tabPropertiesList',
        props: {
            name: String,
        },
        computed: {
            tableInit() {
                let results = this.propertiesList.sort(firstBy("dateUpdated",-1))
                return results
            },
            ...mapGetters(['propertiesList','dictionnary']),
        },
        methods:{
            handleEdit(row) {
                this.getOneProperty(row.id).then(()=> {
                    this.setActiveTab(row.mandateNumero)

                })
            },
            handleDelete(index, row) {

            },

            ...mapActions(['setActiveTab','getOneProperty'])
        },
    }
</script>

actions.js

import axios from 'axios'

export const updateProperty =  function (store,property) {

    return axios.put('http://localhost:8888/immoBack/web/app_dev.php/api/estates/'+property.id,property).then((response)=>{

        if(response.status == 200) //UPDATED
        {
            store.commit('UPDATE_PROPERTY',response.data)
        }

        return response

    }).catch(function (error) {

        var responseObject = Object.assign({}, error);
        return responseObject.response
    })
}

store.js `

import Vue from 'vue'
import Vuex from 'vuex'
import { updateProperty,setActiveTab,removeTab,getOneProperty,getDictionnary } from 'actions'
import { propertiesList,activeTab,dictionnary,tabs,newProperty} from 'getters'

Vue.use(Vuex)

export const state = {
    propertiesList: [],
    activeTab: "mandatsList",
    dictionnary: [],
    newProperty: emptyProperty ,

}

export const getters = {
    propertiesDisplayed,propertiesList,activeTab,dictionnary,
}

export const actions = {
    getMainProperties,addNewProperty,updateProperty,getOneProperty,getDictionnary
}

export const mutations = {

    ADD_PROPERTY_TABLE(state,property)
    {
        state.propertiesList.push(property)

    },
    ADD_DICTIONNARY(state,dictionnary)
    {
        state.dictionnary.push(...dictionnary)

    },
    UPDATE_PROPERTY ( state, property)
    {
        let indexPropertyToUpdate = state.propertiesList.findIndex((c)=> c.id === property.id)
        state.propertiesList[indexPropertyToUpdate] = property
    },
    ADD_PROPERTIES(state,properties)
    {
        state.propertiesList.push(...properties)
    },
    SET_ACTIVE_TAB(state,index)
    {
        state.activeTab = index
    },
}

export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations

The dataTable object name is "tableInit" and the mutation is "UPDATE_PROPERTY" . Note : when I add one row ( ADD_PROPERTY_TABLE ) the table render works well.

[njleonzhang]

@Sancho66 it's 0:00 in my time zone. I will try to check you code torrow. BTW, when you edit one row of table, you should use assign, not =.

Object.assign(row, data) Can not be row = data

Maybe you can check this point.

[Sancho66]

I replaced :

 UPDATE_PROPERTY ( state, property)
    {
        let indexPropertyToUpdate = state.propertiesList.findIndex((c)=> c.id === property.id)
        state.propertiesList[indexPropertyToUpdate] = property
    },

by :

UPDATE_PROPERTY ( state, property)
    {
        let propertyToUpdate = state.propertiesList.find((c)=> c.id === property.id)
        Object.assign(propertyToUpdate,property)
    },

@njleonzhang Thanks you very much. The Object.assign function fix the problem.

[njleonzhang]

:)