Vue.js：下拉选择变更后分类列表未重新渲染问题求助

Hey there! Let's tackle why your component isn't updating properly when switching parent categories—using $forceUpdate() is a temporary band-aid, but we can fix the root cause so Vue handles updates automatically.

Common Reasons for the Problem #

Vue relies on its reactivity system to detect data changes and re-render. If your filtered categories aren't triggering a re-render, it's likely because:

• You're modifying data in a way Vue can't track (like directly editing array indexes or using non-reactive variables)
• You're not assigning the filtered results to a reactive property that Vue watches

Step-by-Step Solutions #

1. Use a Computed Property (Best Practice)

Computed properties are reactive by default—they automatically recalculate when their dependencies change. This is perfect for filtering data based on a selected parent:

export default {
  data() {
    return {
      selectedParent: '', // Track your selected parent category
      category: [/* Your array of categories with name/parentName */],
      categoryPar: [/* Your array of parent category names */]
    }
  },
  computed: {
    filteredCategories() {
      // Return only categories matching the selected parent
      if (!this.selectedParent) return [];
      return this.category.filter(cat => cat.parentName === this.selectedParent);
    }
  }
}

Then in your template, just render filteredCategories:

<div v-for="cat in filteredCategories" :key="cat.name">
  {{ cat.name }}
</div>

Now whenever selectedParent or category changes, Vue will automatically recalculate the filtered list and re-render the page.

2. Use a Watcher to Update a Reactive Variable

If you prefer using a watcher instead of a computed property, make sure you're updating a reactive data property:

export default {
  data() {
    return {
      selectedParent: '',
      category: [/* ... */],
      categoryPar: [/* ... */],
      filteredCategories: [] // Reactive variable for filtered results
    }
  },
  watch: {
    // Watch for changes to selectedParent
    selectedParent(newParent) {
      // Update filteredCategories with new results
      this.filteredCategories = this.category.filter(cat => cat.parentName === newParent);
    }
  },
  // Initialize the filtered list on component load
  created() {
    if (this.selectedParent) {
      this.filteredCategories = this.category.filter(cat => cat.parentName === this.selectedParent);
    }
  }
}

This works because filteredCategories is a reactive data property—Vue tracks changes to it and re-renders when it's updated.

3. Avoid Non-Reactive Data Modifications

Make sure you're not modifying arrays in ways Vue can't detect. For example:

• ❌ Don't do this: this.category[0] = newCategory (Vue can't track index assignments)
• ✅ Do this instead: this.category.splice(0, 1, newCategory) or replace the entire array: this.category = [...this.category, newCategory]

Why $forceUpdate() Only Works Temporarily #

$forceUpdate() forces the component to re-render, but it doesn't fix the underlying reactivity issue. When you switch the parent category again, Vue still can't detect the data change, so the problem comes back. Fixing the reactivity ensures updates happen automatically.

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