CODEWITHSUNDEEP
vuejs3
Cyrine
Cyrine

Reputation: 87

How can i make a dynamic form in vuejs

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>

Upvotes: 2

Views: 270

Answers (1)

wittgenstein
wittgenstein

Reputation: 4472

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>

Upvotes: 3

Related Questions