Vue.js中跨组件添加数据后Bootstrap Vue表格不更新的问题

Hey there, let's break down why your table isn't updating after adding data and fix it properly—without messing up other routes.

问题根源 #

When you jump from AddingData.vue to the /1 route, if the table.vue component was already rendered before (like you visited /1 earlier), Vue will reuse the existing component instance. That means the created hook won't run again, so your new data never gets loaded. Using the updated hook works but triggers on every component update—hence why it's affecting other routes.

解决方案 1: Use beforeRouteUpdate Router Hook #

This hook is built exactly for scenarios where the same component is reused for different routes (or even the same route with the same params but needing a refresh). It lets you reload data whenever the route updates, without impacting other components.

Update your table.vue component like this:

<script>
import axios from 'axios';

export default {
  data() {
    return {
      serverData: [],
      currentPage: 1,
      totalPage: 0,
      previousPage: null,
      nextPage: null,
      page_no: 1,
      navigation: false
    };
  },
  created() {
    this.loadData();
  },
  // Add this hook to handle route updates
  beforeRouteUpdate(to, from, next) {
    // Reload data whenever the route changes (even if params stay the same)
    this.loadData();
    next(); // Don't forget to call next() to proceed with the route change
  },
  methods: {
    loadData() {
      const url = `/urls/${this.$route.params.id}/`;
      axios.get(url)
        .then((response) => {
          const data = response.data;
          this.serverData = data.results;
          this.currentPage = parseInt(this.$route.params.id);
          this.totalPage = data.total_pages;
          this.previousPage = data.previous;
          this.nextPage = data.next;
          this.page_no = data.current_page_no;
          this.navigation = false;
          // Remove all jQuery DOM manipulations—we'll handle this with Vue bindings
        })
        .catch((error) => {
          console.error('Failed to load data:', error);
          this.$router.push({ name: 'service', params: { id: 1 } });
        });
    }
  }
};
</script>

解决方案 2: Fix Button Disabling (Ditch jQuery!) #

Your current code uses jQuery to add disabled classes, which conflicts with Vue's reactive system. Replace those with Vue's dynamic class bindings in your template:

<template>
  <div class="pagination">
    <button 
      id="first" 
      :class="{ disabled: currentPage === 1 }"
    >
      First
    </button>
    <button 
      id="previ_btn" 
      :class="{ disabled: !previousPage }"
    >
      Previous
    </button>
    <button 
      id="next_btn" 
      :class="{ disabled: !nextPage }"
    >
      Next
    </button>
    <button 
      id="last" 
      :class="{ disabled: currentPage === totalPage }"
    >
      Last
    </button>
  </div>
</template>

<style scoped>
.disabled {
  opacity: 0.5;
  pointer-events: none;
  /* Add your custom disabled button styles here */
}
</style>

Now Vue will automatically update the button states whenever your page data changes—no manual DOM tweaks needed.

额外技巧: Force Refresh for Same Route Params #

If you're jumping back to the same route (e.g., /1 after adding data) and beforeRouteUpdate doesn't trigger, add a unique query parameter in AddingData.vue when navigating:

// In AddingData.vue's button click handler
this.$router.push({ 
  path: '/1', 
  query: { refresh: Date.now() } // Add a unique timestamp to trigger a refresh
});

Then add a watcher in table.vue to detect this query change:

watch: {
  '$route.query.refresh'() {
    this.loadData();
  }
}

This ensures the table reloads even if the route path stays the same.

Why This Is Better Than updated #

• beforeRouteUpdate only triggers when the route changes, so it won't interfere with other routes or unrelated component updates.
• Using Vue's reactive bindings instead of jQuery keeps your code aligned with Vue's design principles and avoids bugs from manual DOM manipulation.

内容的提问来源于stack exchange，提问作者Reshma Ks