VueJS dynamic form using ant design radio button

Question

I want to use radio buttons so each time I select one the form changes, I tried with simple html code but I would love to do it with Ant design vue. here's the code I have now i want to make it with antdv..

<input type="radio" v-model="z" value="x" > <span>Xx</span> 
<input type="radio" v-model="z" value="y" > <span>Yy/span>

<div v-if="z === 'x'"> /*some code here for form n1*/</div>
<div v-if="z === 'y'"> /*some code here for form n2*/</div>
data(){
return {
z:'x'}
 },

That code should (and does) work, what's the issue you're seeing? — Daniel, Mar 15 '21 at 17:25
I changed the issue i actually want to use a-radio instead of html input but when i use v-model in it's not working — Cyrine, Mar 16 '21 at 18:18

score 0 · Answer 1 · answered Mar 16 '21 at 20:15

The code works, you may need to explain the issue you're encountering

Vue.createApp({
  data() {
    return {
      z: 'x'
    }
  },
}).mount("#app")

label{display:block;margin:0.5em;}

<script src="https://unpkg.com/vue@3.0.7/dist/vue.global.prod.js"></script>

<div id="app">
  <label><input type="radio" v-model="z" value="x" >Xx</label>
  <label><input type="radio" v-model="z" value="y" >Yy</label>
  <pre>{{ {z} }}</pre>
  <div v-if="z === 'x'"> /*some code here for form n1*/</div>
  <div v-if="z === 'y'"> /*some code here for form n2*/</div>
</div>

Yes it works i don't want to use html input i want to use the antv radio button instead — Cyrine, Mar 17 '21 at 13:40

VueJS dynamic form using ant design radio button

1 Answers1