Creé un pequeño módulo como validador inspirado en vee-validate y me gustaría usarlo junto con la API de composición. Tengo una lista de mensajes de error que se almacenan en una matriz reactiva; sin embargo, cuando recupero esta variable en mi componente vue, a pesar de que los mensajes de error se almacenan en la matriz en consecuencia, la variable no se actualiza en la plantilla vue.
No soy muy hábil con esto, así que podría no ser conciso con mi explicación. Las referencias en el módulo parecen estar funcionando correctamente. ¿Puede alguien indicarme amablemente qué podría estar haciendo mal? Estoy completamente atascado y no sé de qué otra manera puedo proceder.
Validator.js (módulo Npm - ubicado en node_modules)
import Vue from 'vue'; import VueCompositionAPI from '@vue/composition-api' import {ref} from '@vue/composition-api' Vue.use(VueCompositionAPI) class Validator { …. register({fieldName, rules, type}) { if (!fieldName || rules === null || rules === undefined) { console.error('Please pass in fieldName and rules'); return false; } let errorMessages = ref([]); // define callback for pub-sub const callback = ({id, messages}) => { if (fieldId === id) { errorMessages.value = Object.assign([], messages); console.log(errorMessages.value); // this contains the value of the error messages. } }; return { errorMessages, }; } ……InputField.vue
<template> <div :style="{'width': fieldWidth}" class="form-group"> <label :for="fieldName"> <input ref="inputField" :type="type" :id="fieldName" :name="fieldName" :class="[{'field-error': apiError || errorMessages.length > 0}, {'read-only-input': isReadOnly}]" @input="handleInput" v-model="input" class="form-input"/> </label> <div> <p class="text-error">{{errorMessages}}</p> // Error messages not displaying </div> </div> </template> <script> import {ref, watch} from '@vue/composition-api'; import Validator from "validator"; export default { props: { fieldTitle: { required: true }, fieldName: { required: true }, type: { required: true }, rules: { default: 'required' } }, setup(props) { // The error messages are returned in the component but they are not reactive. Therefore they only appear after its re-rendered. const {errorMessages, handleInput, setFieldData} = Validator.register(props); return { errorMessages, handleInput, } } } </script>Debería usar Vue.Set() , activa directamente la actualización de los valores relacionados
El problema es que Validator.register() desestructura directamente los props , lo que elimina la reactividad de los valores resultantes .
Use toRefs(props) para crear un objeto de ref s para cada accesorio y páselo a Validator.register() :
import { toRefs } from 'vue' 👇 Validator.register(toRefs(props)) Luego actualice Validator.register() para desenvolver las referencias donde sea necesario:
class Validator { register({ fieldName, rules, type }) { 👇 👇 👇 if (!fieldName.value || rules.value === null || rules.value === undefined) { console.error('Please pass in fieldName and rules'); return false; } ⋮ } }