如何在 Vuejs 中使用按钮有条件地渲染？

Question

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 个屏幕。

我想要做的是，检查验证并通过点击屏幕 3 中的提交按钮移至第四屏幕。我猜逻辑应该放在屏幕 3 中的提交按钮内。

Answer 1

我假设您已经定义了用于 v-model 的 user 对象。如果不是，那可能是问题的一部分。但是这会起作用

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

如果这不起作用，那么问题将出在您的用户对象和 v-models 上。