Regenerate a table right after a computed property was accessed

user3EDW 0
Viewed 28

I have the following problem. I need to regenerate a table every time a sqlData() computed property is accessed.

<div v-for="(val, key) in table">
<!-- display table data -->
</div>

computed: {
  sqlData () {
  // read SQL with axios
  return this.table = response.data
  }
},
methods: {
  methodOne() {
   // make some changes to the SQL, then call to read the updated table
   this.sqlData;
 },
  methodTwo() {
  // make some other changes to the SQL, then call to read the updated table
   this.sqlData;
 }
}

Could you suggest a solution?

vue.js
2 Answers

As per your requirement, computed property is not required. Initially on component load you can update the table content in the mounted() life cycle hook.

You can use this approach :

mounted() {
   this.getTableData();
},
methods: {
  getTableData() {
    // read SQL with axios
    this.table = response.data;
  },
  methodOne() {
   // make some changes to the SQL, then call to read the updated table
   this.getTableData();
 },
  methodTwo() {
  // make some other changes to the SQL, then call to read the updated table
   this.getTableData();
 }
}
Rohìt Jíndal0

It is possible to make vue.js reload a component by updating the key-attribute (which is good practice to set when using v-for, anyway).

So, in your case, you could have a counter as key:

<div v-for="(val, key) in table" :key="counter + key">
<!-- display table data -->
</div>

data: {
  counter: 0
},
computed: {
  sqlData () {
  // read SQL with axios
  return this.table = response.data
  }
},
methods: {
  methodOne() {
   // make some changes to the SQL, then call to read the updated table

  counter++
   this.sqlData;
 },
  methodTwo() {
  // make some other changes to the SQL, then call to read the updated table

  counter++

   this.sqlData;
 }
}
STh0
Related