How to conditionally render the screens with button in vuejs? - vue.js

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>
conditional rendering is working fine but, In screen3 submit button code, i have ""v-on:click="isWelcome = true""", if i remove this line, password validation is happening onclick of submit button, Where if i place again ""v-on:click="isWelcome = true""" without checking the validations simply its moving to 4th screen

Answer 1

You could try to use steps to show everything you need.
data() {
return{
submissionStep: 1
}
}
I believe that you render different components for each screen. So you can show each component with v-if="submissionStep === 1"
Each time you click the next/submit button you change the submissionStep with a method binded like
update(){
if(this.submissionStep <= 3){
this.submissionStep += 1
}
},
Instead of 3 you can limit your steps as the number of screens you have

Answer 2

<button v-if="isHidden" v-on:click="isWelcome = true"> HELLO</button>
<button v-if="!isHidden" v-on:click="isWelcome = true"> HELLO</button>
Use the v-if attribute inside the buttons.
If you have more than one condition, do it in computed.
computed: {
displayButton() {
return (this.isHidden && this.isWelcome);
},
}
<button v-if="displayButton" v-on:click="isWelcome = true"> HELLO</button>