Как показать или скрыть и передать согласно условию vue -form-wizard? - PullRequest
Новая
       5

Как показать или скрыть и передать согласно условию vue -form-wizard?

0 голосов
/ 05 февраля 2020

У меня есть недостаток, заключающийся в том, что при скрытии шага, показе его в соответствии с условием отображается ошибочно, то есть порядок шагов изменяется: здесь ссылка реплицированной ошибки 

<div id="app">
  <div>
    <form-wizard @on-complete="onComplete" ref="wizard" color="#e67e22">
      <tab-content title="Personal details" icon="ti-user">
        My first tab content
        <p>
        Show 1  {{show}}
        </p>
        <p>Show 2 {{show2}}</p>
        <button @click="show = !show">
         CHANGE SHOW
        </button>
        <button @click="show2 = !show2">
         CHANGE SHOW2
        </button>
      </tab-content>
      <tab-content v-if="show || show2 " title="Additional Info" icon="ti-settings">
        My second tab content

      </tab-content>
      <tab-content title="Last step" icon="ti-check">
        Yuhuuu! This seems pretty damn simple
      </tab-content>
      <template slot="footer" scope="props">
       <div class=wizard-footer-left>
           <wizard-button  v-if="props.activeTabIndex > 0 && !props.isLastStep" :style="props.fillButtonStyle">Previous</wizard-button>
        </div>
        <div class="wizard-footer-right">
          <wizard-button v-if="!props.isLastStep"@click.native="props.nextTab()" class="wizard-footer-right" :style="props.fillButtonStyle">Next</wizard-button>

          <wizard-button v-else @click.native="alert('Done')" class="wizard-footer-right finish-button" :style="props.fillButtonStyle">{{props.isLastStep ? 'Done' : 'Next'}}</wizard-button>
        </div>

      </template>
    </form-wizard>
  </div>
</div>

https://jsfiddle.net/2rLsw7a8/1/

По сути, шоу 1 и шоу 2 должны быть ложными, чтобы скрыть, если шоу 1 или шоу 2 истинно, тогда показать шаг (tab-content)

...