Javascript 为什么'；返回上一步时是否显示TV-show？

我在VUE中有一个SAP，它由4个步骤组成。 当在第一步按钮中提交并重定向到第二步时，如果返回到第一步，则最后一个组件将停止显示，尽管在更改组件之前已显示。 这是我的模板

对于
{{this.formInfo.name}}，您有：
{{estimation.name}
{{estimation.description}}
{{estimation.price.toString（）.replace（“.”，“，”）}
发送信息

下面是我控制组件负载的数据和方法

数据（）{
返回{
步骤：1，
isFormCompleted:false，
isBreedSelected:错误，
isNameCompleted:false，
加载：false，
isLoaderFinished:错误，
myTimeout:0
};
},
方法：{
onChangeName（事件）{
如果（this.myTimeout>=0&&event）{
clearTimeout（this.myTimeout）；
这是。加载=真；
this.isnamepleted=false；
}
this.myTimeout=window.setTimeout（（）=>{
this.isnamepleted=true；
const typedAnimalName=event.target.\u值；
此.capitalizeAnimalName（typedAnimalName）；
这一点：加载=错误；
this.isLoaderFinished=true；
this.isFormCompleted=true；
setTimeout（（）=>（this.$refs.scrolled_3.focus（）），10）；
}, 2200);
},
大写动物名称（typedAnimalName）{
var splitAnimalName=typedAnimalName.toLowerCase（）.split（“”）；
对于（变量i=0；i

一旦我到达步骤2并返回到步骤1，只显示信息，直到id为“animalName”的输入。 我做错了什么？ 加载第一个组件时，它遵循逻辑并显示它们，一旦我转到下一个组件，它们就会消失，这有什么原因吗

---

提前感谢大家的时间和帮助

之所以如此，是因为当您返回到第一页时，组件正在重新呈现，因此所有默认状态都将生效。请尝试使用保存状态，以便所有组件都由存储区中的状态控制。

之所以如此，是因为返回第一页时组件正在重新呈现，因此所有默认状态都将生效。尝试将状态保存为，以便所有组件都由存储中的状态控制。

如果每个步骤都是自己的组件，则可以使用

保持活动
组件缓存组件及其状态，以便在它们之间切换时保留其状态。我个人更喜欢在这种情况下使用Vuex，因为它更简单

<keep-alive>
    <step-1-component v-if="step === 1"></step-1-component>
    <step-2-component v-if="step === 2"></step-2-component>
    <step-3-component v-if="step === 3"></step-3-component>
</keep-alive>



请参阅：
如果每个步骤都是它自己的组件，则可以使用
保持活动状态
组件来缓存组件及其状态，以便在它们之间切换时保留它们的状态。我个人更喜欢在这种情况下使用Vuex，因为它更简单

<keep-alive>
    <step-1-component v-if="step === 1"></step-1-component>
    <step-2-component v-if="step === 2"></step-2-component>
    <step-3-component v-if="step === 3"></step-3-component>
</keep-alive>



请参阅：
问题在于组件的状态不是持久的

有多种解决方案

1.使用
Vuex
这可能是默认的，或者是处理这种情况的最常见的方法。使用此库来管理状态，而不是将数据存储在组件中。很可能您只需在项目中实现vuex，而不必继续阅读。这是一个可靠的选择，有太多的优点要列出

2.在父组件中封装表单状态。
您可以在父对象内为相关数据创建状态，而不是在步骤组件内管理状态

例如：



其思想是
Step2
组件将通过
formData
prop传递数据。并且，每当数据发生更改时，就会使用新数据调用
updateFormData
函数。您甚至可以通过使用
v-model
来简化它

3.DIY商店
如果您使用的是Vue js 2（>=2.6，<3），则可以使用
observable

Vue 2.6+
创建一个
store.js
文件

import Vue from "vue";
export const store = Vue.observable({
  step: 1,
  isFormCompleted: false,
  isBreedSelected: false,
  isNameCompleted: false,
  loading: false,
  isLoaderFinished: false,
});

然后你可以从任何组件调用你的
store.js
，如果你在
beforeCreate
钩子中将它分配给
this
，你可以像使用数据一样使用它（
this.store.isFormCompleted
在脚本中，
store.isFormCompleted
在模板中）

如果要跳过额外的
存储。
，甚至可以分解存储对象

Vue 3
与此处的另一个类似，但使用一个
reactive（）
（或多个
ref（）
）。如果您想让我对此进行扩展，请告诉我。
问题在于组件的状态不是持久的

有多种解决方案

1.使用
Vuex
这可能是默认的，或者是处理这种情况的最常见的方法。使用此库来管理状态，而不是将数据存储在组件中。很可能您只需在项目中实现vuex，而不必继续阅读。这是一个可靠的选择，有太多的优点要列出

2.在父组件中封装表单状态。
您可以在父对象内为相关数据创建状态，而不是在步骤组件内管理状态

例如：



其思想是
Step2
组件将通过
formData
prop传递数据。并且，每当数据发生更改时，就会使用新数据调用
updateFormData
函数。您甚至可以通过使用
v-model
来简化它

3.DIY商店
如果您使用的是VUEJS2（>=2.6，<3），那么可以使用
observable