I'm looking for an example on how to code a custom component that displays a number of options as radio buttons (passed as props to the custom component), of which only one radio button is selected at the time and with two-way binding. I also need this using the Composition API.
I have this custom component at the moment:
<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>
The items are fetched from a Firebase collection, which works perfectly fine. My issue is that I can check all radio buttons individually and they all stay checked. And the selected value is not bound.
An example of the use of the custom radio group input component I have is like this:
<RadioInput :label="'Commercial Status'" :item="'commercial_status'" :sortby="'sort_order'" :sortorder="'asc'" v-model:model="commercialStatusId" :required="false" />
The result before selection looks like this:
But then I can check all radio buttons, and only one should be checked at the same time:
