使用自定义组件和组合 API 发布 VueJS 单选按钮组答案

【问题标题】：Issue VueJS Radio Button Group with custom component and Composition API使用自定义组件和组合 API 发布 VueJS 单选按钮组
【发布时间】：2021-07-09 21:37:00
【问题描述】：

我正在寻找一个关于如何编写自定义组件的示例，该组件将多个选项显示为单选按钮（作为道具传递给自定义组件），其中只有一个单选按钮被选中，并且有两个方式绑定。我还需要使用 Composition API。

我现在有这个自定义组件：

<template>
    <Label :label="fieldLabel" :required="required" />
    <div v-for="item in items" :key="item.id">
        <input type="radio" :value="item.id" @input="$emit('input:model', $event.target.value)">
        {{ item.label }}
    </div>
</template>

<script>
import { db } from '@/firebase/config'
import { onMounted, ref } from '@vue/runtime-core';

import Label from './Label'

export default {
    name: 'RadioInput',
    components: {
        Label
    },
    props: ['item', 'label', 'model', 'sortby', 'sortorder'],
    emits: ['input:model'],
    setup(props) {
        const fieldLabel = props.label ? props.label : null
        const item = props.item
        const items = ref([])
        const model = props.model;
        const required = props.required !== undefined ? props.required : false;
        const sortBy = props.sortby !== undefined ? props.sortby : 'label';
        const sortOrder = props.sortorder !== undefined ? props.sortorder : 'asc';

        onMounted(() => {
            // Get the collection from firestore
            db.collection(item).orderBy(sortBy, sortOrder).get()
                .then(res => {
                    items.value = res.docs.map(doc => {
                        return { ...doc.data(), id: doc.id }
                    })
                })
        })

        return { fieldLabel, items, model, required }
    }
}
</script>

这些项目是从 Firebase 集合中获取的，它工作得非常好。我的问题是我可以单独检查所有单选按钮并且它们都保持选中状态。并且选择的值没有被绑定。

我有一个使用自定义单选组输入组件的例子是这样的：

<RadioInput :label="'Commercial Status'" :item="'commercial_status'" :sortby="'sort_order'" :sortorder="'asc'" v-model:model="commercialStatusId" :required="false" />

选择前的结果如下：

但是我可以检查所有单选按钮，并且应该同时检查一个：

【问题讨论】：

标签： html vue.js vuejs3

【解决方案1】：

无线电不互斥

这部分不是 Vue 问题——它是纯 HTML ...

Defining a radio group

通过为组中的每个单选按钮赋予相同的name 来定义单选组。建立单选组后，选择该组中的任何单选按钮会自动取消选择同一组中的任何当前选择的单选按钮。

绑定

当使用v-model 和radio 时，它使用checked 属性和change 事件。你没有绑定checked，你正在处理@input而不是@change

最重要的是，您的组件正在发出 input:model 事件（到父级），但 v-model 上的 custom components 期待 update 事件，而不是 input

【讨论】：

你说得对，Michal，谢谢。我过多地假设它与 Vue 有关。通过为输入的名称属性分配一个虚拟值，我现在只能选择 1 个值。但是，双向绑定还没有工作，即默认设置没有基于模型发生（即使模型具有正确的值）。知道我错过了什么吗？

【解决方案2】：

好吧，我想通了。对于默认检查，我必须添加并数据绑定选中的属性。以下代码正常工作：

<input type="radio" name="myDummyGroupingName" :checked="item.id==model" class="shadow" :value="item.id" @input="$emit('update:model', $event.target.value)">

在脚本中加上“更新”而不是“输入”：

emits: ['update:model']

【讨论】：