Vue-tables-2: updating table dynamically

Created on 15 Jun 2017 · 6Comments · Source: matfish2/vue-tables-2

is there a way to have the table update the data dynamically?
the user enters data in a textarea, and when you press enter, the data is saved, but I don't know how to get the data to show on the table without reloading the whole page, and I want to avoid this.

this is the code

```
inputHandler(e) { // when control enter is pressed
if (e.keyCode === 13 && e.ctrlKey) {
this.saver()
}
},

saver() {
  let blob = { // this is what the textarea would be sending 
    cname: this.cname,
  }
  let url = `/api/lessonvocab/${blob.cname}`
  let p = this.$http.post(url, blob)
  p.then(response => {
    this.tableData = response.body
    this.ready = true
  })
  return p
},

```

Source

dhdmstjs

Most helpful comment

This will work only when not using vuex.
Since you are using vuex the data prop value in not reactive, as it is assigned to the vuex store.
In order to change the data, you need to affect the data property on the vuex table module.

E.g, say your table has a name prop of table:

In your vuex store mutations:

{
   UPDATE_TABLE(state, data) {
   state.table.data = data; // replace `table` with your own table name 
  }
}

In your vue instance:

methods:{
  updateTable() {
   data = []; // whatever data you wish to pass;
   this.$store.commit('UPDATE_TABLE', data);
  }
}

matfish2 on 22 Sep 2017

👍2

All 6 comments

@dhdmstjs that would be normally done by the server-side component and a column filter ? Is it something else that you're trying to achieve ?

CoolGoose on 16 Jun 2017

That depends on whether you are using the server- or client-side component.
On the server component you can call the refresh or reload method to get the new data.
On the client component simply update you original dataset and vue's reactivity will take care of the rest.

matfish2 on 21 Jun 2017

Hello @matfish2!

Could you tell me if this should work? The changeTableContent() method is not updating the datatable content. I'm using Vue.js 2.3.4 and Vue Tables 0.6.53.

<script>
  import Vue from 'vue'
  import { ClientTable } from 'vue-tables-2'

  Vue.use(ClientTable, {}, true)

  export default {
    methods: {
      changeTableContent () {
        this.tableData = []
      }
    },
    data () {
      return {
        columns: ['id', 'name', 'email'],
        tableData: [
          {
            id: 1,
            name: 'Bob Sacamano',
            email: '[email protected]'
          },
          {
            id: 2,
            name: 'Frank Costanza',
            email: '[email protected]'
          },
          {
            id: 3,
            name: 'Joe Davola',
            email: '[email protected]'
          }
        ]
      }
    }
  }
</script>

<template>
  <div class="main">
    <button @click="changeTableContent">Change table content</button>
    <v-client-table name="myTable" :data="tableData" :columns="columns"></v-client-table>
  </div>
</template>

Thanks in advance!

kaerimichi on 13 Jul 2017

👍1

I'm experiencing the same issue than @kaerimichi Nuxt 1.0.0.RC7 Vue Tables 0.6.64
If I inspect the data of the table with developer tools they are changed, but the DOM doesn't refresh, that's really strange.
Maybe we could open a new issue?

lbineau on 31 Aug 2017

E.g, say your table has a name prop of table:

In your vuex store mutations:

{
   UPDATE_TABLE(state, data) {
   state.table.data = data; // replace `table` with your own table name 
  }
}

In your vue instance:

methods:{
  updateTable() {
   data = []; // whatever data you wish to pass;
   this.$store.commit('UPDATE_TABLE', data);
  }
}

matfish2 on 22 Sep 2017

👍2

@matfish2 how do I declare this in the root mutation if I use constants and modules?

{
   UPDATE_TABLE(state, data) {
   state.table.data = data; // replace `table` with your own table name 
  }
}

I'm doing something like this but it throws an error: Uncaught Error: [vuex] mutations should be function but "mutations.UPDATE_CLIENTTABLE" is {}.

import * as types from './mutation-types'

export const UPDATE_CLIENTTABLE = {

    [types.UPDATE_CLIENTTABLE] (state, data) {
        state.ClientTableLine.data = data
    }

}