CODEWITHSUNDEEP
javascripthtmlvue.jsvuejs2
CodeName
CodeName

Reputation: 579

Call the mounted lifecycle again

I currently have a table that uses v-for to populate the data

<table v-for="(data, idx) in dataset" :key="idx">
</table>

Then, I have two buttons that insert or delete certain things in the database after which I would like to re-populate the table to reflect these new changes.

So far, the data is captured from an API that is called in the mounted lifecycle.

mounted: function (){ 
     axios.get(....).then((response => {
           this.dataset = response.data;
     });
}

Hence, is it possible to re-call the mounted function to call the API and thus re-running the v-for?

Upvotes: 0

Views: 265

Answers (1)

mimbrown
mimbrown

Reputation: 196

You can just extract your loading logic into a method that can be called from multiple locations:

const Comp = {
  methods: {
    fetchData() {
      axios.get(....).then(response => {
        this.dataset = response.data;
      });
    },
    onSomeOtherAction() {
      // Do stuff.
      this.fetchData();
    },
  },
  mounted() { 
    this.fetchData();
  },
}

Upvotes: 4

Related Questions