49 lines
1.2 KiB
Vue
Executable File
49 lines
1.2 KiB
Vue
Executable File
<template>
|
|
<div>
|
|
<fieldset>
|
|
<div class="space-y-3 sm:flex sm:items-center sm:space-y-0 sm:space-x-5">
|
|
<div v-for="item in radioItems" :key="item.id" class="flex items-center">
|
|
<input v-model="groupValue"
|
|
type="radio" name="radio"
|
|
:checked="itemSelected.id === item.id ? true : false"
|
|
@change="onChange(item)"
|
|
class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500" />
|
|
<label :for="`${item.id}`" class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500">{{
|
|
item.title }}</label>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch, type PropType, onMounted } from 'vue'
|
|
|
|
interface Item {
|
|
id: number;
|
|
title: string;
|
|
checked?: boolean;
|
|
}
|
|
|
|
const onChange= (e:Item) => {
|
|
itemSelected.value = e
|
|
emit('update:groupValue', e)
|
|
}
|
|
|
|
const props = defineProps({
|
|
radioItems: {
|
|
type: Array as PropType<Item[]>,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const itemSelected = ref(props.radioItems[0])
|
|
const emit = defineEmits(['update:groupValue'])
|
|
const groupValue = ref(1)
|
|
|
|
onMounted(() => {
|
|
itemSelected.value = props.radioItems[0]
|
|
})
|
|
|
|
</script>
|