Tengo el componente Radio, que usa el model en la exportación predeterminada.
<template> <div class="radio"> <label class="radio__container"> <input type="radio" :name="name" :value="value" :checked="isChecked" :disabled="disabled" @change="changeHandler" @input="inputHandler" /> <slot name="checkmark" v-bind="{ isChecked, disabled }"> <span class="radio__checkmark" /> </slot> <span class="radio__content"> <slot name="label" v-bind="{ label, isChecked, disabled }"> <span class="radio__label" v-text="label" /> </slot> </span> </label> </div> </template> <script> export default { name: "Radio", model: { prop: "selected", event: "change", }, props: { name: { type: String, default: "", }, value: { type: String, default: "", }, label: { type: String, default: "", }, disabled: { type: Boolean, default: false, }, selected: { type: String, default: "", }, }, computed: { isChecked() { return this.value === this.selected; }, }, methods: { changeHandler() { this.$emit("change", this.value); }, inputHandler() { this.$emit("input", this.value); }, }, }; </script> Necesito refactorizarlo a vue 3 <script setup> y no sé qué hacer con
model: { prop: "selected", event: "change", }¿Alguien tiene alguna sugerencia?
Puede probar esto https://vuejs.org/guide/components/events.html#usage-with-v-model
Ejemplo:
<input @input="(event) => $emit('update:checked', event.target.checked)" type="checkbox" :checked="checked" /> props: ['checked'],