1

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>

1 respuesta 1

1

Rebuilding the Nuxt3 project into a new working directory helps me - the errors disappeared. Its appear again if you try to upgrade the project to Nuht3-RC-13, for example, and are not removed when downgrading.

Or you may fix part of any points of errors in your code, but maybe it's a compiler error. Errors are detected in more places in the mode of "npm run build" than dev.

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.