亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

為什么回到上一步沒有顯示v-show?

為什么回到上一步沒有顯示v-show?

慕村9548890 2023-04-27 10:42:57
我有一個 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”之前,只會顯示信息。我究竟做錯了什么?有什么原因可以解釋為什么在加載第一個組件時它會遵循邏輯并顯示它們,而一旦我轉到下一個組件它們就會消失?謝謝大家的寶貴時間并提前提供幫助
查看完整描述

3 回答

?
森林海

TA貢獻2011條經驗 獲得超2個贊

問題是組件的狀態不是持久的。


有多種解決方案。


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())。如果您想讓我對此進行擴展,請告訴我。


查看完整回答
反對 回復 2023-04-27
?
烙印99

TA貢獻1829條經驗 獲得超13個贊

如果每個步驟都是它自己的組件,你可以使用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>

查看完整回答
反對 回復 2023-04-27
?
泛舟湖上清波郎朗

TA貢獻1818條經驗 獲得超3個贊

之所以如此,是因為當你回到第一頁時組件正在重新渲染,所以所有的默認狀態都會生效。嘗試使用Vuex保存您的狀態,以便所有組件都由商店中的狀態控制。



查看完整回答
反對 回復 2023-04-27
  • 3 回答
  • 0 關注
  • 190 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號