Vue -материальный условный баг md-stepper - PullRequest
Новая
       76

Vue -материальный условный баг md-stepper

0 голосов
/ 26 мая 2020

У меня есть большая анкета для поступления в университет, которая разделена на 4-5 блоков по компоненту md-steppers. Поэтому, если приемная кампания принимает международные сертификаты (например, IELTS, TOEFL, TestDaf и т.д. c.), Я показываю степпер, где применимы только сертификаты. Но я проверил случаи, когда кампании действительно принимают такие сертификаты, но на производственном сервере есть кампании, которые не принимают международные сертификаты. v-show и v-if работают и в то же время нет. Они не показывают компоненты в пошаговом режиме, но желательное поведение было бы, если бы на странице не было md-stepper. Когда я переключаюсь на другой степпер, он пропускает один шаговый. Я бы использовал md-editable, но пользователь может вводить шаги в случайном порядке, и я бы не хотел видеть отключенный шаг посередине страницы. 

    <md-steppers v-if="loaded">
        <md-step
            id="previous-education"
            :md-label="$t(`${url}.previousEducation`)">
            <previous-education ref="educationRef"/>
        </md-step>
        <md-step
            id="test-result"
            :md-label="$t(`${url}.testResult`)">
            <test-result ref="testResultRef" :maxDirectionChoice="maxDirectionChoice"/>
        </md-step>
        <!-- this part shouldn't be on the page if campaign doesn't accept certificates -->
        <md-step
            v-if="internationalCertificate"
            id="international-cert"
            :md-label="$t(`${url}.internationalCert`)">
            <md-checkbox v-model="isCertHolder" id="has-cert">
                <label>{{ $t(`${url}.certHolder`) }}</label>
            </md-checkbox>
            <international-certificate ref="certRef" v-show="isCertHolder"/>
        </md-step>
        <md-step
            id="grant"
            :md-label="$t(`${url}.grant`)">
            <md-checkbox v-model="isGrantHolder" id="has-grant">
                <label>{{ $t(`${url}.grantHolder`) }}</label>
            </md-checkbox>
            <grant v-show="isGrantHolder" ref="grantRef"/>
        </md-step>
        <md-step
            id="directions"
            :md-label="$t(`${url}.directions`)">
            <directions :maxDirectionChoice="maxDirectionChoice" ref="directionRef"/>
            <div class="md-layout md-gutter md-alignment-bottom-center">
                <md-button
                    @click="submit"
                    class="md-layout-item md-primary md-raised md-size-10 md-xsmall-size-100 md-small-size-100 md-medium-size-100">
                    {{ $t(`${url}.submit`) }}
                </md-button>
            </div>
        </md-step>
    </md-steppers>
...