Как условно визуализировать с помощью кнопки в Vuejs?

export default {
  name: "HelloWworld",

  data: function () {
    return {
      
      isHidden: false,
      isWelcome: false,
      isFadeout: false,
      
      }
      }

<div  v-if="!isHidden">
 //some code for screen1
 
  <button v-on:click="isHidden = true"> HELLO</button>
  </div>
  
   <div  v-else-if="isHidden && !isFadeout">
 //some code for screen 2
 
  <button v-on:click="isFadeout = true"> Hi</button>
  </div>
  
   <div  v-else-if="isFadeout && isHidden && !isWelcome">
 <input
            :type="passwordFieldType"
            v-model="user.password"
            id="password"
            name="password"
            class="input-section-three"
            :class="{ 'is-invalid': submitted && $v.user.password.$error }"
            placeholder="Enter new password"
            :maxlength="maxpassword"
            v-on:keypress="isPassword($event)"
          />

<div
            v-if="submitted && $v.user.password.$error"
            class="invalid-feedback-two"
          >
            <span v-if="!$v.user.password.required">Password is required</span>
            <span v-if="!$v.user.password.minLength"
              >Minimum 8 character with
                        alphanumeric along with 1 capital letter, 1 small letter
                        and 1 special character at least</span
            >
          </div>

   <input
            :type="passwordFieldTypetwo"
            v-model="user.confirmPassword"
            id="confirmPassword"
            name="confirmPassword"
            class="input-section-three"
            :class="{
              'is-invalid': submitted && $v.user.confirmPassword.$error
            }"
            placeholder="Confirm password"
            :maxlength="maxconfirmpassword"
            v-on:keypress="isconfirmPassword($event)"
            :disabled="user.password.length < 8"
          />
           <div
            v-if="submitted && $v.user.confirmPassword.$error"
            class="invalid-feedback-two"
          >
            <span v-if="!$v.user.confirmPassword.required"
              >Confirm Password is required</span
            >
            <span v-else-if="!$v.user.confirmPassword.sameAsPassword"
              >Password must match</span
            >
          </div>
          
 <button  v-on:click="isWelcome = true" :disabled="user.confirmPassword.length < 8" > SUBMIT </button>
  </div>
  
   <div  v-else-if="isWelcome">
 //some code for screen 4
 
  <button>Fine</button>
  </div>

условный рендеринг работает нормально, но в коде кнопки отправки screen3 у меня есть v-on:click="isWelcome = true", если я удаляю эту строку, проверка пароля происходит при нажатии кнопки отправки, где, если я снова помещаю v-on:click="isWelcome = true" без проверки проверки, он просто перемещается на 4-й экран.

Что я пытаюсь сделать, так это проверить проверки и перейти к 4-му экрану при нажатии кнопки отправки на экране 3. Я думаю, логика должна быть помещена внутри кнопки отправки на экране 3.


person taneeru dhanunjay    schedule 26.02.2021    source источник
comment
Привет, Абхинав. Почему вы не используете свойство computed для проверки проверки перед возвратом true в welcome?   -  person Sayf-Eddine    schedule 26.02.2021
comment
с этим ответом v-on:click=isWelcome = user.confirmPassword.length ›= 8   -  person taneeru dhanunjay    schedule 26.02.2021
comment
Он отлично работает с этим кодом, но проблема в том, что сначала, если я нажимаю кнопку отправки на экране 3, проверки работают нормально, но в поле подтверждения пароля, если я ввожу пароль, который не соответствует, но превышает 8 символов. он перенаправляет на 4-й экран   -  person taneeru dhanunjay    schedule 26.02.2021


Ответы (1)


Я предполагаю, что вы определили объект user, который вы используете для v-модели. Если нет, то это может быть частью проблемы. однако это сработает

v-on:click="[isWelcome = user.confirmPassword.length >= 8]"

Если это не сработает, проблема будет в вашем пользовательском объекте и v-моделях.

person Kubwimana Adrien    schedule 26.02.2021
comment
Он отлично работает с этим кодом, но проблема в том, что сначала, если я нажимаю кнопку отправки на экране 3, проверки работают нормально, но в поле подтверждения пароля, если я ввожу пароль, который не соответствует, но превышает 8 символов. он перенаправляет на 4-й экран. - person taneeru dhanunjay; 26.02.2021
comment
@taneerudhanunjay Я обновил ответ. попробуйте обернуть обратный вызов клика в [] - person Kubwimana Adrien; 26.02.2021
comment
Пробовал ту же проблему, может быть что-то нужно изменить в поле подтверждения пароля, чтобы сохранить условие, например, если пароль тот же, только перенаправить на другую страницу. - person taneeru dhanunjay; 28.02.2021
comment
Это мой код подтверждения подтверждения пароля. - person taneeru dhanunjay; 28.02.2021