CODEWITHSUNDEEP
vue.jsvuejs2
margherita pizza
margherita pizza

Reputation: 7145

VueJS simple togooling with radio buttons

My requirement is something like this.

I have two radio buttons namely Live Paper and Normal Paper

If user select Live Paper another two html input elements(datatime-local,time) must be shown.

If the user selected the Normal Paper these two additional input elements should be hide. How do I achieve this through vueJS.

This is my code.

<div class="row">
    <div class="col">
      <input type="radio" name="paper" value="">Live Papaer
      <br>
      Live on <input type="datetime-local" name="" value="" > Time <input type="time" name="" value="">
    </div>
    <div class="col">
      <input type="radio" name="paper" value="">Normal Paper
    </div>
  </div>

Upvotes: 3

Views: 3651

Answers (2)

Ekushisu
Ekushisu

Reputation: 461

Have a look to these documentations :

Also, from the community, you can find a lot of resources to understand View Binding and Forms in VueJS :

Upvotes: 4

Vamsi Krishna
Vamsi Krishna

Reputation: 31362

Just initialize a property named selected in your data option

new Vue({
   el:"#app",
   data(){
       return{
           selected: 'live'
       }
   }
 })

Bind this selected property to both the radio inputs. See that the value attribute of radio inputs is set to live and normal respectively

Set up v-if on the div you conditionally want to render. The v-if is only true when selected === 'live'

<div id="app">    
    <div class="row">
        <div class="col">
          <input type="radio" name="paper" v-model="selected" value="live">Live Papaer
          <div v-if="selected === 'live'">
              Live on <input type="datetime-local" name="" value="" > Time <input type="time" name="" value="">
          </div>
        </div>
        <div class="col">
          <input type="radio" name="paper" v-model="selected" value="normal">Normal Paper
        </div>
   </div>

Here is the fiddle Reference: radio inputs

Upvotes: 5

Related Questions