为什么回到上一步没有显示v-show？

Question

我有一个 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;    }一旦我到达第 2 步并返回到第 1 步，在输入 ID 为“animalName”之前，只会显示信息。我究竟做错了什么？有什么原因可以解释为什么在加载第一个组件时它会遵循逻辑并显示它们，而一旦我转到下一个组件它们就会消失？谢谢大家的宝贵时间并提前提供帮助

Answer 1

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

有多种解决方案。

1. 全局管理状态Vuex

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

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

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

例子：

<Step2

  v-if="step === 2"

  :formData="formData"

  :updateFormData="updateFormData"

  :nextStep="() => gotoStep(3)"

></Step2>

这个想法是Step2组件将通过 prop 传入数据formData。每当数据发生变化时，updateFormData都会用新数据调用函数。您甚至可以利用v-model.

3. DIY商店

如果您使用的是 Vue js 2 (>= 2.6, < 3)，您可以使用observable

查看 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.，你甚至可以解构存储对象。

视图 3

与那里的另一个类似，但使用一个reactive()（或多个ref()）。如果您想让我对此进行扩展，请告诉我。

Answer 2

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

Answer 3

之所以如此，是因为当你回到第一页时组件正在重新渲染，所以所有的默认状态都会生效。尝试使用Vuex保存您的状态，以便所有组件都由商店中的状态控制。