在 vue 组件上提交表单时如何获取值单选按钮？

Posted 2023-02-23

【中文标题】在 vue 组件上提交表单时如何获取值单选按钮？

【英文标题】：How can I get value radio button when submit form on the vue component?

【发布时间】：2018-08-21 06:41:26

【问题描述】：

我有两个组件

我的第一个组件是这样的：

<template>
    <div>
        ...
            <form-radio id="gender" name="gender" :data="genderData" v-model="gender">Gender</form-radio>
        ...
        <button type="submit" class="btn btn-primary" @click="submit">Submit</button>
    </div>
</template>
<script>
    export default 
        data() 
            return 
                gender: null,
                genderData: [
                    id: 1, label: 'Men', value:1,
                    id: 2, label: 'Women', value:2
                ],
            
        ,
        methods: 
            submit() 
                console.log('submit profile')
                console.log(this.gender)
            
        
    
</script>

在第一个组件上，它会调用表单输入组件

表单输入组件如下：

<template>
    <div class="form-group">
        <label class="col-sm-3 control-label"><slot></slot></label>
        <div class="col-sm-9">
            <label v-for="item in data" class="radio-inline">
                <input type="radio" :name="name" :id="item.id" :value="item.value" :required="isRequired ? true : false" @input="$emit('input', $event.target.value)">
                item.label
            </label>
        </div>
    </div>
</template>
<script>
    export default 
        props: 
            name: String,
            data: Array,
            isRequired:
                type: Boolean,
                default: true
            ,
            pattern: String,
            value: 
                type: [String, Number]
            
        
    
</script>

我使用这样的模式。所以表单输入组件可以在很多组件中使用

但我的问题是：提交按钮时我无法检索值

我尝试这样，但console.log(this.gender) 的结果是null

我希望在输入数据名称和提交表单时，它会得到性别

我该如何解决这个问题？

【参考方案1】：

对于单选框和选择，使用@change 而不是@input：

<input type="radio" ... @change="$emit('input', $event.target.value)">

【讨论】：

也许你能再次帮助我。看看这个：***.com/questions/49337786/…

你怎么看？你是否可以帮助解决这个问题？因为问题和这个答案有关

哦，嘿嘿，不好意思，我没看。我在打电话时收到了评论，但从来没有真正看一眼。对不起。我现在就去看看。将在那里评论或回答我的看法。

【参考方案2】：

你必须在radio中添加一个值attr。如下：

<input type="radio" id="gender" value="male" v-model="gender">

还有剧本

export default 
 data() 
  return
    gender: 'male'
  
 

如果您想使用选项进行选择：

<select v-model="selected">
  <option disabled value="">Select sex</option>
  <option value="male">Male</option>
  <option value="female">Female</option>
 </select>

还有剧本

   export default 
    data() 
     return  
      selected: ''