Vue JS - 来自 javascript 模块的变量不是反应式的

Question

我创建了一个小模块作为受 vee-validate 启发的验证器，我想将它与组合 API 结合使用。 我有一个存储在反应式数组中的错误消息列表，但是当我在我的 vue 组件中检索此变量时，尽管错误消息相应地存储在数组中，但 vue 模板中的变量并未更新。

我对此不太了解，所以我的解释可能不够简洁。模块中的 refs 似乎工作正常。 有人可以指出我可能做错了什么吗？我完全被卡住了，我不知道我还能怎么做。

Validator.js（Npm 模块 - 位于 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>

Answer 1

问题是Validator.register()直接解构props，即removes the reactivity from the resulting values。

解决方案

使用toRefs(props) 为每个道具创建一个refs 的对象，并将其传递给Validator.register()：

import { toRefs } from 'vue'
                      ? 
Validator.register(toRefs(props))

然后更新Validator.register() 以在需要的地方解开引用：

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;
    }
    ⋮
  }
}

Answer 2

你应该使用Vue.Set()，它直接触发相关值被更新