Hola tengo un component select option el cual me genera un error uso vue 3 con nuxt js
[plugin:vite:vue] v-model cannot be used on a prop, because local prop bindings are not writable.
Use a v-bind binding combined with a v-on listener that emits update:x event instead.
/var/www/frontend.com/components/ui/FSelect.vue:36:20
34 | <template>
35 | <div class="select__container-select" >
36 | <select v-model="modelValue" @change="updateValue" class="select__select">
| ^
El componente que se realizo esta de esta manera.
import { ISelect } from "../../interfaces/interfaces";
const props = defineProps<{
options: Array<any> | ISelect<any>[];
modelValue: any;
returnNumber?: boolean;
}>();
//Definiendo CustomEvent y Custom v-model.
// El Event de 'change-value' como su nombre indica para avisar cuando el valor cambia , es utilpor ejemplo para resetear paginacion o otros elemntos , sin agregar un watch explicitamente
const emit = defineEmits(["update:modelValue", "change-value"]);
// Por defecto los input retorna un string , pero pasandole el props returnNumber se puede parsear el resultado.
const updateValue = (event: any) => {
emit(
"update:modelValue",
props.returnNumber ? parseInt(event.target.value) : event.target.value
);
emit(
"change-value",
props.returnNumber ? parseInt(event.target.value) : event.target.value
);
};
</script>
<template>
<div class="select__container-select">
<select v-model="modelValue" @change="updateValue" class="select__select">
<!--//? Se verifica si el props options es un array simple o un array de objetos -->
<option v-for="opt in options" :key="opt.value ?? opt" :value="opt.value ?? opt">
<slot name="options" :data="opt">{{ $t(opt.label ?? opt) }}</slot>
</option>
</select>
<div class="select__arrow"></div>
</div>
</template>
<style lang="scss" scoped>
@import "../../assets/sass/base/colors";
.select {
&__label {
display: block;
align-self: start;
}
&__container-select {
width: 100%;
height: 32px;
position: relative;
border-radius: 0.25em;
padding: 0.375rem;
cursor: pointer;
line-height: 1.1;
background-color: #fff;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.15);
border-radius: 12px;
}
&__arrow {
position: absolute;
width: 8px;
top: 50%;
transform: translateY(-50%);
right: 0.8rem;
height: 8px;
background-color: $app-primary;
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
&__select {
//Resetearde estilos ,incluyendo la flecha
appearance: none;
position: relative;
background-color: transparent;
border: none;
padding: 0 2.68rem 0 1.68rem;
margin: 0;
width: 100%;
outline: none;
font-family: 1.25rem;
cursor: inherit;
color: $app-gray;
line-height: inherit;
z-index: 10;
}
}
</style>