Regenerate a table right after a computed property was accessed-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

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