Detailed explanation of how to automatically refresh the page and refresh method after deleting Vue list data

Problem description:

After the front-end deletes a piece of data or adds new data, the back-end operation is successful, but the front-end will not refresh automatically. You need to refresh the current page (use vue-router to reroute to the current page, the page will not be refreshed, and when window.reload() or router.go(0) is used to refresh, the entire browser is reloaded)

solve:

The provide / inject combination

Effect: Allows an ancestor component to inject a dependency into all its descendants, no matter how deep the component hierarchy is, and it is always effective as long as the upstream and downstream relationships are established.

(Declare the reload method to control the display or hiding of router-view, thereby controlling the reloading of the page)

App.vue code:

<template>
  <div id="app">
      <router-view v-if="isRouterAlive"></router-view>

  </div>
</template>

<script>
export default {
  name: 'App',
   components: {},
  provide(){
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true,
    };
  },
  cread() {},
  methods: {
    reload(){
      this.isRouterAlive = false;
      this.$nextTick(function(){
        this.isRouterAlive = true;
      })
    }
  },
  mounted() {
  },
}
</script>

<style>
</style>

Directions:

  // Reference vue reload method inject: ['reload'],


//Call this.reload() in the method

You must always go better and further when you are young, so as to live up to yourself and the determination behind you! come on!

Summarize

This is the end of this article about actively refreshing the page and refreshing method after deleting data in the vue list. For more relevant content about refreshing after deleting data in the vue list, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!