VueJS动态表单使用ant design单选按钮

Posted 2023-02-23

【中文标题】VueJS动态表单使用ant design单选按钮

【英文标题】：VueJS dynamic form using ant design radio button

【发布时间】：2021-06-12 12:59:56

【问题描述】：

我想使用单选按钮，所以每次我选择一个表单更改时，我都尝试使用简单的 html 代码，但我更愿意使用 Ant design vue 来实现。这是我现在想用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'
 ,

【问题讨论】：

该代码应该（并且确实）有效，您遇到了什么问题？

我改变了我实际上想使用 a-radio 而不是 html 输入的问题，但是当我在 中使用 v-model 时它不起作用

【参考方案1】：

代码有效，您可能需要解释您遇到的问题

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

labeldisplay: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>

【讨论】：

是的，它可以工作我不想使用 html 输入我想使用 antv 单选按钮