Vue新手用vue-good-wizard遇返回报错：Cannot read property 'key' of undefined

Hey there! Let's work through this issue you're hitting with vue-good-wizard—totally get how frustrating it is when things break only when navigating back. Since you suspect your playerSelectionBox template is getting rendered twice, here are some targeted fixes and checks to resolve this:

• Add a unique key to your step components
  Vue reuses component instances by default to optimize performance, which can lead to conflicts when navigating back in the wizard. Adding a unique key tells Vue to destroy the old component instance and create a fresh one when steps change. Try binding key to either the current step number or a unique identifier for each step:

  <vue-good-wizard v-model="currentStep">
    <wizard-step :key="currentStep" title="Player Selection">
      <player-selection-box :key="currentStep" />
    </wizard-step>
    <!-- Other wizard steps here -->
  </vue-good-wizard>
  

  This ensures your playerSelectionBox starts with a clean state every time you enter the step, even when navigating back.

• Clean up component side effects
  If your playerSelectionBox has timers, event listeners, or pending async requests, these might linger in old component instances and clash with new ones when you return. Use the beforeUnmount hook to clean up these side effects:

  export default {
    data() {
      return {
        timer: null,
        cancelToken: null
      }
    },
    beforeUnmount() {
      // Clear any active timers
      if (this.timer) clearInterval(this.timer);
      // Remove global event listeners
      window.removeEventListener('resize', this.handleResize);
      // Cancel pending API requests
      if (this.cancelToken) this.cancelToken.cancel('Component unmounted');
    }
  }
  

• Reset component state on step re-entry
  When navigating back, make sure your component's internal state is reset to its initial values. You can do this in the mounted hook (or activated if using <keep-alive>) to refresh state every time the component loads:

  export default {
    methods: {
      resetSelectionState() {
        this.selectedPlayers = [];
        this.formErrors = {};
        // Reset any other relevant data properties
      }
    },
    mounted() {
      this.resetSelectionState();
    }
  }
  

• Disable step caching if needed
  Some wizard components use <keep-alive> to cache steps for faster navigation. If vue-good-wizard has this enabled by default, try disabling it (check the component docs for a prop like no-cache or similar) to force full re-renders when navigating back.

Start with the key fix first—it's the most common solution for duplicate rendering issues in Vue step wizards. If that doesn't resolve it, move on to checking side effects and state resets.

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