I've Radio component, which uses model in export default.
<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>
I need to refactor it to vue 3 <script setup> and I don't know what to do with
model: {
prop: "selected",
event: "change",
}
Has anyone any suggestion?
You can try this https://vuejs.org/guide/components/events.html#usage-with-v-model
Example:
<input
@input="(event) => $emit('update:checked', event.target.checked)"
type="checkbox"
:checked="checked"
/>
props: ['checked'],