VueJS simple togooling with radio buttons - vue.js

Question

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>

Answer 1

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

Answer 2

Have a look to these documentations :
VueJS Forms : Basics
Vue JS Forms : Radio buttons
Vue JS Conditional Rendering
Also, from the community, you can find a lot of resources to understand View Binding and Forms in VueJS :
Understand what's behind v-model
2-Way Binding in Vue with V-Model - Vue.js 2.0 Fundamentals