В форме Vue неожиданно отображается в текстовом поле ввода условного триггера, даже если условие не выполнено - PullRequest
Новая
       100

В форме Vue неожиданно отображается в текстовом поле ввода условного триггера, даже если условие не выполнено

0 голосов
/ 07 августа 2020

Мой дизайн формы таков: у меня есть раскрывающийся список для выбора каналов источника мультимедиа, и если выбрано «Другие», то текстовое поле ввода для «Предоставить дополнительную информацию ...» будет запрашивать ввод. Если пользователь выбирает другой элемент раскрывающегося списка, текстовое поле ввода условия будет очищено, отключено и не будет отображаться.

Теперь мне нужно включить еще два элемента раскрывающегося списка (событие, переход) для этого условного текста ввода поле, чтобы отобразить то же, что и «Другие». 

     <v-layout row wrap>
        <v-flex md3 sm12 xs12>
          <b class="section-form-title grey--text text--lighten-1">SOURCE</b>
        </v-flex>
        <v-flex md9 sm12 xs12 d-flex>
          <v-layout wrap class="section-form">
            <v-flex md12 sm12 xs12 class="mt-4 pa-0">
              <v-flex md6 sm12 xs12 class="form-control-field">
                <label class="field-label">How did you know about the programme(s) you are applying for ?<span class="amber--text text--darken-1">*</span></label>
                <common-single-select
                  :is-disabled="isFormDisabled"
                  v-model="form.wayKnowingProgram"
                  :select-options="howDoYouKnowWays"
                  value-field="dropdownId"
                  label-field="dropdownValue"
                  @select="onOtherWaySelect"
                  v-validate="'required'"
                  data-vv-name="wayKnowingProgram"
                  :class="{ 'field-invalid': errors.has('wayKnowingProgram') }"
                ></common-single-select>
                <span v-show="errors.has('wayKnowingProgram')" class="field-error">{{ errors.first('wayKnowingProgram') }}</span>
              </v-flex>
            </v-flex>
            <v-flex md12 sm12 xs12 class="mt-4 pa-0" v-if="isShowOtherWay">
              <v-flex md6 sm12 xs12 class="form-control-field">
                <label class="field-label">Please specify the source of information/referrer's name<span class="amber--text text--darken-1">*</span></label>
                <input type="text" class="field-input"
                  :disabled="isFormDisabled"
                  v-model="form.otherWayKnowingProgram"
                  v-validate="'required'"
                  data-vv-name="otherWayKnowingProgram"
                  :class="{ 'field-invalid': errors.has('otherWayKnowingProgram') }"
                >
                <span v-show="errors.has('otherWayKnowingProgram')" class="field-error">{{ errors.first('otherWayKnowingProgram') }}</span>
              </v-flex>
            </v-flex>
          </v-layout>
        </v-flex>
      </v-layout>

Значение v-if="isShowOtherWAy" истинно, тогда оно будет отображаться для вводимого текста. Но если я выберу другой раскрывающийся элемент, поле все равно будет отображаться и не может быть пропущено, почему?

...