回到上一步时为什么不显示v-show？ Vue 2.6 + Vue 3

如何解决回到上一步时为什么不显示v-show？ Vue 2.6 + Vue 3

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

   <input
      type="text"
      id="animalName"
      ref="animalName"
      v-model="animalFormInfo.name"
      @keypress="onChangeName($event)"
      @keyup="onChangeName($event)"
      />
      <div class="loader-spinner" v-if="loading">
        <app-loader>
      </div>
    </div>
  </div>
</div>

<div v-show="isNameCompleted">
  <div class="from-group">
    <h1 class="title">
      For
      <span>{{this.formInfo.name}}</span>,you have:
    </h1>
    <div class="list-services">
      <div
        class="column-service"
        v-for="estimation in filteredEstimation"
        v-bind:key="estimation.name"
      >
        <div>{{estimation.name}}</div>
        <div>{{estimation.description}}</div>
        <div>{{estimation.price.toString().replace(".",",")}}</div>
      </div>
    </div>
  </div>
</div>
<div class="button-line" v-show="isLoaderFinished"></div>
<div class="forward" v-show="isLoaderFinished">
  <div class="forward-button">
    <button
      ref="submit"
      v-bind:disabled="!isFormCompleted"
      type="submit"
      @click="navigateToCreate"
    >
      SEND INFO
    </button>
  </div>
</div>

以及下面的数据和控制组件负载的方法


data() {
  return {
    step: 1,isFormCompleted: false,isBreedSelected: false,isNameCompleted: false,loading: false,isLoaderFinished: false,myTimeout: 0
  };
},methods:{
  onChangeName(event) {
    if (this.myTimeout >= 0 && event) {
      clearTimeout(this.myTimeout);
      this.loading = true;
      this.isNameCompleted = false;
    }
    this.myTimeout = window.setTimeout(() => {
      this.isNameCompleted = true;
      const typedAnimalName = event.target._value;
      this.capitalizeAnimalName(typedAnimalName);
      this.loading = false;
      this.isLoaderFinished = true;
      this.isFormCompleted = true;
      setTimeout(() => (this.$refs.scrolled_3.focus()),10);
    },2200);
  },capitalizeAnimalName(typedAnimalName) {
    var splitAnimalName = typedAnimalName.toLowerCase().split(' ');
    for (var i = 0; i < splitAnimalName.length; i++) {
      splitAnimalName[i] = splitAnimalName[i].charAt(0).toUpperCase() + splitAnimalName[i].substring(1);
    } 
    return this.animalName = splitAnimalName.join(' ');
  },},

一旦我到达步骤2并返回到步骤1，仅显示信息，直到输入id为“ animalName”的输入为止。我究竟做错了什么？加载第一个组件时，它是否遵循逻辑并显示它们，而当我转到下一个组件时，它们消失了吗？

感谢大家的时间和事先的帮助

解决方法

如果每个步骤都是其自己的组件，则可以使用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>

请参阅：https://vuejs.org/v2/api/#keep-alive

问题在于组件的状态不是持久的。

对此有多种解决方案。

1。使用`Vuex`

全局管理状态

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

2。将表单状态封装在父组件中。

您可以在父对象内部为相关数据创建状态，而不是在step组件中管理状态。

示例：

<Step2
  v-if="step === 2"
  :formData="formData"
  :updateFormData="updateFormData"
  :nextStep="() => gotoStep(3)"
></Step2>

这个想法是Step2组件将通过formData属性传递数据。每当数据更改时，updateFormData函数都会被新数据调用。您甚至可以利用v-model来简化它。

3。 DIY商店

如果您使用的是Vue js 2（> = 2.6，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，如果将其分配给this钩子中的beforeCreate，则可以像使用数据一样使用它（this.store.isFormCompleted在脚本中，store.isFormCompleted在模板中）

import { store} from 'store.js';
//...
  beforeCreate(){
    this.store = store;
  }

如果您想跳过多余的store.，甚至可以分解商店对象。

Vue 3

类似于那里的另一个，但是使用reactive()（或多个ref()）。让我知道您是否想对此进行扩展。

之所以这样，是因为当您返回首页时，该组件正在重新渲染，因此所有默认状态都将生效。尝试使用Vuex保存状态，以便所有组件都可以由商店中的状态控制。