Vuejs - v-if and v-Else chained

Asked

Viewed 227 times

0

Good afternoon, everyone,

I have the following html:

<template>
    <div  v-if="!visibleForm" style="min-height: 793px;">
     // conteúdo ....
    </div>
    <div v-else-if="visibleForm">
        <fieldset v-if="textoTipo === 'Efg'">
            <form-validacao1 :params="param"></form-validacao1>
        </fieldset>
        <fieldset v-if="textoTipo === 'Abc'">
            <form-validacao2  :params="param"></form-validacao2>
        </fieldset>
    </div>
</template>

In summary I need to show a div according to the parameter and after showing the second one, show the fieldsets according to a parameter

html vue.js

  • Oops, what’s going on when you’re doing it this way?

  • Brings nothing... If I take the if s from the fieldset brings me normally

  • What version of Vue? v-Else-if is supported starting with version 2.1.0. Post all the code that surrounds the functionality thus gives to test. Edit now that your comment has appeared, it is not showing the fieldsets pq the two ifs must be giving false

1 answer

0

The v-if does not support multiple conditions, use the v-show as below:

<template>
    <div  v-if="!visibleForm" style="min-height: 793px;">
     // conteúdo ....
    </div>
    <div v-else-if="visibleForm">
        <fieldset v-show="textoTipo === 'Efg'">
            <form-validacao1 :params="param"></form-validacao1>
        </fieldset>
        <fieldset v-show="textoTipo === 'Abc'">
            <form-validacao2  :params="param"></form-validacao2>
        </fieldset>
    </div>
</template>

Browser other questions tagged html vue.js

You are not signed in. Login or sign up in order to post.