时间戳

首页 > 解决方案 > 回到上一步为什么不显示v-show？

javascript - 回到上一步为什么不显示v-show？

问题描述

我在 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”。我究竟做错了什么？有什么理由为什么在加载第一个组件时它遵循逻辑并显示它们，一旦我转到下一个组件，它们就会消失？

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

标签： javascriptvue.jsvuejs2show

解决方案

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

推荐阅读