I'm trying to make a form where I have 2 radio buttons if I check one of them a form will appear and if I check the other one another form will appear and I want this to happen on the same page. I want these two buttons to open each one of them in a different form.
<div class="mb-4">
<a-radio-group
>
<a-radio value="pm">PersonneM</a-radio>
<a-radio value="pp">PersonneP</a-radio>
</a-radio-group>
</div>
first of all the documentation can provide the exact use case for your question. Visit the form input bindings and the conditional rendering page to get a better understanding of how vuejs works.
You are using what is called two-way-data-binding with the v-model directive to store the value of the radio button as a reactive variable and display one form or another based on that:
Vue.createApp({
data() {
return {
picked: ''
}
}
}).mount('#v-model-radiobutton').demo {
font-family: sans-serif;
border: 1px solid #eee;
border-radius: 2px;
padding: 20px 30px;
margin-top: 1em;
margin-bottom: 40px;
user-select: none;
overflow-x: auto;
}<script src="https://unpkg.com/vue@next"></script>
<div id="v-model-radiobutton" class="demo">
<!-- use v-model for two-way-data-binding -->
<input type="radio" id="one" value="one" v-model="picked" />
<label for="one">One</label>
<br />
<input type="radio" id="two" value="two" v-model="picked" />
<label for="two">Two</label>
<br>
<!-- use v-if condition to display form one or... -->
<form v-if="picked === 'one'">
<h3>form one</h3>
<input type="text" placeholder="input foo">
</form>
<!-- use v-else instead of this next line -->
<form v-if="picked === 'two'">
<h3>form two</h3>
<input type="text" placeholder="input bar">
</form>
</div>