Vue - 来自外部 TypeScript 类的动态属性不是响应式的

Question

我有一个小问题，我创建了一个包来管理表单，一切正常，直到我需要基于 API 响应创建一个动态表单。

这是包裹：https://github.com/nulvem/js-form

可以用npm安装：

npm install @nulvem/js-form

这是我调用 Form 类的 Vue 组件：

<script>
import {Form} from '@nulvem/js-form'

export default {
  data() {
    return {
      form: new Form({
        template: {
          value: null,
          validation: {
            rules: 'required',
            messages: {
              required: 'You must select the type of report'
            }
          }
        }
      })
    }
  },
  mounted() {
    this.form.template = 'random-id'

    // These data will be obtained from an API
    let fields = [
      'start_date',
      'end_date',
      'wallets',
    ]

    fields.forEach((field) => {
      let fieldData = {
        value: null,
        validation: {
          rules: 'required',
          messages: {
            required: `You must enter the field ${field.description}`
          }
        }
      }

      this.form.$addField(field, fieldData)
    })

    // Here we can only see the getter/setter of the template property that was passed when instantiating the Form class
    console.log(this.form)
  }
}
</script>

问题是：我在创建 new Form ({...}) 实例期间传递给表单的字段是反应性的，因为当我通过调用 this.form.$AddField() 函数添加新字段时，这些字段没有反应性。

有趣的是Form类的construct调用了一个名为this.form.$AddFields()的函数，该函数多次调用this.form.$AddField()函数。

为什么它在构造函数中起作用而在分开调用时不起作用？如何解决这个问题？

知道会发生什么吗？这让我发疯了，我一直试图找到问题几个小时，但我找不到它。

编辑

作为快速修复，我们在包中进行了更改，可以将 Form 实例作为第三个参数传递给 $addFields 函数，因此属性是反应性的，但是我们希望它在没有的情况下工作必须传递这个参数。

Answer 1

VueJS 在渲染后失去了添加到 data 的属性的反应性。您可以在此处阅读更多相关信息：https://br.vuejs.org/v2/guide/reactivity.html。

尝试解决此问题的一种快速方法是在每次添加新属性时添加this.$forceUpdate()，但根据您的上下文，它也可能带来其他问题。

或者您可以尝试使用Vue.set() 方法，而不是您的$addField 方法。您可以在上面的同一链接中阅读更多内容。

Answer 2

删除上下文并更改此行以进行反应：

this.$initialValues[field] = fieldDeclaration.value;

=>>>

this.$initialValues[field] = fieldDeclaration.value;
this.$initialValues = Object.assign({}, this.$initialValues);