Vue.js Vuejs/条带元素-组件更改时信用卡号消失

我创建了一个示例Vuejs项目，您可以在其中切换两个组件。在第一个组件中，用户输入用户名和信用卡号以创建其帐户，在第二个组件中，用户验证其输入的信息：

我正在使用条带元素来处理我的付款。当用户在组件1中输入相关信息时，他们点击“下一步”进入组件2，在那里他们可以查看信息以查看是否一切正常

但是，如果在组件2上，用户意识到他们输入了错误的内容，需要更改内容，该怎么办？好的，他们可以回击返回组件1进行必要的更改

问题是：我对组件使用keep alive，当用户回击时，用户名仍在输入字段中，但信用卡号不见了

我希望有一个单独的“确认组件”，用户可以查看他们输入的所有信息是否准确，但如果每次用户回击时，所有信用卡信息总是消失，那就很烦人了。这看起来像是糟糕的用户体验设计

---

这是条带元素的预期行为吗？或者有办法解决这个问题吗？

我无法解释为什么会发生这种情况，但一个解决办法是使用

v-show

，而不是

保持活动状态

，谢谢。这不是我想在组件之间交换的方式，但至少现在它可以正常工作。