CODEWITHSUNDEEP
vue.js
Kannan.P
Kannan.P

Reputation: 1273

show / hide the element by using v-show attributes in Vue js

Here my myVueInstance having two radio button and one text box. Based on click radio button options I should show / hide the text box. 

<div id='myVueInstance'>

    <label>Show Text box or not ? </label>
    <input type="radio" id="one" value="true" v-model="picked">
        <label for="one">Yes</label>

        <input type="radio" id="two" value="false" v-model="picked" >
        <label for="two">No</label>
        <br>
        <span>Picked: {{ picked }}</span>
        <input  type='text' v-show='picked'> 

    </div>


<script type="text/javascript">
    var app = new Vue({
        el:'#myVueInstance',
        data:{

            title : 'My learning of Vue',
            picked:true
        }
     });
</script>

Note : I'm using Vue updated version.

Upvotes: 2

Views: 1993

Answers (1)

Sajib Khan
Sajib Khan

Reputation: 24136

Here, type of picked is becoming String when selecting radio button. Try this:

 <input  type='text' v-show="picked === 'true'">
...
...
...
 data:{
   title : 'My learning of Vue',
   picked: 'true'
 }

Upvotes: 2

Related Questions