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

Question

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.

Sajib Khan · Accepted Answer · 2020-01-22 12:13:11Z

2

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'
 }

edited Jan 22, 2020 at 12:13

answered Mar 27, 2019 at 11:37

Sajib Khan

24.4k9 gold badges69 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Kannan.P Over a year ago

Thank you @Sajib Khan for your quick attention on this. I got the solution by adding v-show="picked === 'true'" on my text box. Great !.

Kannan.P Over a year ago

And Sajib, If you are set picked: true instead of picked: 'true'. Then you no need to check that data types like v-show="picked === 'true'". Instead of that you can check like v-show="picked ==true". :)

Sajib Khan Over a year ago

=== is recommended, cause when we use == type conversion happens! :)

Kannan.P Over a year ago

Yes so that I suggested as no need to pass as string type in el, as well as we no need to check ===. So if you are passed are string type in el, then we should check the type conversion also :) .

Sameer Bhayani Over a year ago

perfect, Helped me.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related