Presenting a unique radio list component:
<template>
<div class="list">
<div class="radio">
<input type="radio" name="custom-radio-list" :id="'custom-radio-full-' + cid" value="" @change="updateCustomRadio" :checked="selectedOption === ''">
<label :for="'custom-radio-full-' + cid">All</label>
</div>
<div v-for="option in customOptions" :key="option" class="radio">
<input type="radio" name="custom-radio-list" :id="'custom-radio-' + option + '-' + cid" :value="option" @change="updateCustomRadio" :checked="selectedOption === option">
<label :for="'custom-radio-' + option + '-' + cid">{{ option }}</label>
</div>
</div>
</template>
<script>
export default {
name: 'CustomRadioList',
props: ['customOptions', 'cid', 'selectedOption'],
methods: {
updateCustomRadio (event) {
this.$emit('updateCustomRadio', event.target.value)
}
}
}
</script>
Implementing this component:
<CustomRadioList :customOptions="customOptions" :selectedOption="selectedOption" cid="1" @updateCustomRadio="updateCustomRadio"/>
In the parent component, simply modify the selectedOption value:
updateCustomRadio ($event) {
this.selectedOption = $event
},
If using only one instance of this component on the page, it functions correctly. However, when attempting to use it twice in different components, the selectedOption is altered upon clicking either instance, but the check only reflects on the last instance.
An illustrative example has been created here: https://codesandbox.io/s/happy-almeida-8w7jy