55 lines
1.3 KiB
Vue
Executable File
55 lines
1.3 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, type PropType, onMounted } from 'vue'
|
|
|
|
interface Item {
|
|
id: number
|
|
title: string
|
|
checked?: boolean
|
|
}
|
|
|
|
const onChange = (e: Item) => {
|
|
itemSelected.value = e
|
|
console.log(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>
|