Me escribí un pequeño ayudante para el enlace vue 3 v-model. Curiosamente no funciona totalmente reactivo. Los cambios internos se emiten de forma correcta, los cambios externos no se reconocen. Pero si uso la misma función calculada dentro de mi componente, todo funciona como se esperaba. ¿Cómo escribo el ayudante, para que sea totalmente reactivo?
El ayudante:
import { computed, SetupContext, WritableComputedRef } from 'vue'; export const vModel = <T>(val: T, context: SetupContext, binding = 'modelValue'): WritableComputedRef<T> => computed({ get: () => val, set: (value) => { context.emit(`update:${binding}`, value); }, });el sfc:
<template> <div class="ms-deleteInput"> <input class="ms-deleteInput__input" :label="label" v-model="inputVal" /> <button @click="$emit('delete')" /> </div> </template> <script lang="ts"> import { defineComponent, computed } from 'vue'; export default defineComponent({ name: "deleteInput", props: { modelValue: { type: String, required: true, }, label: { type: String, required: true, }, }, setup(props, context) { // This works const inputVal = computed({ get: () => props.modelValue, set: (value) => { context.emit(`update:modelValue`, value); }, }); // This works, but external changes of modelValue prop will not be detected: const inputVal = vModel(props.modelValue, context); return { inputVal, }; }, }); </script>Si no pasa accesorios al ayudante, no rastreará el cambio de accesorios en la propiedad calculada.
Pase accesorios en lugar de props.modelValue al ayudante:
const inputVal = vModel(props, context);Actualizar el ayudante:
export const vModel = (props, binding) => computed({ get: () => props.modelValue, set: (value) => { context.emit(`update:${binding}`, value); }, });¡Gracias por sus respuestas! Funciona ahora con esto:
import { computed, SetupContext, WritableComputedRef } from 'vue'; export const vModel = <T>(props: Record<string, T>, context: SetupContext, binding = 'modelValue'): WritableComputedRef<T> => computed({ get: () => props[binding], set: (value) => { context.emit(`update:${binding}`, value); }, });pero la escritura no es correcta. me sale el error:
Argument of type 'Readonly<LooseRequired<Readonly<{ modelValue?: unknown; label?: unknown; } & { modelValue: string; label: string; } & {}> & { [x: string & `on${string}`]: undefined; }>>' is not assignable to parameter of type 'Record<string, string>'. 'string & `on${string}`' and 'string' index signatures are incompatible. Type 'undefined' is not assignable to type 'string'. Probé varios tipeos para los props dentro de la función, pero no todos parecen ser correctos. No pude encontrar una buena manera de escribir dentro de la documentación de vue.