Vue -来自外部TypeScript类的动态属性不是反应性的
我有一个小问题，我创建了一个包来管理表单，一切都正常工作，直到我需要创建一个基于API响应的动态表单。
这是一个包：https://github.com/nulvem/js-form
可以与npm一起安装：
npm install @nulvem/js-form下面是我的Vue组件调用Form类：
<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函数，因此属性是响应式的，但是我们希望在不传递此参数的情况下工作。
回答 2
Stack Overflow用户
发布于 2020-12-04 18:11:49
渲染后，VueJS将失去添加到data中的特性的反应性。你可以在这里阅读更多关于这个的内容：https://br.vuejs.org/v2/guide/reactivity.html。
尝试解决此问题的一种快速方法是在每次添加新属性时添加一个this.$forceUpdate()，但它也可能带来其他问题，具体取决于您的上下文。
或者，您可以尝试使用Vue.set()方法，而不是$addField方法。你可以在上面的链接中阅读更多。
Stack Overflow用户
发布于 2020-12-13 14:31:22
删除上下文并更改反应性的此行：
this.$initialValues[field] = fieldDeclaration.value;=>>>
this.$initialValues[field] = fieldDeclaration.value;
this.$initialValues = Object.assign({}, this.$initialValues);https://stackoverflow.com/questions/65146302
复制相似问题
将草稿保存为草稿，然后更新草案？
填充类，然后在以后使用
如何将mathematica文件的输出保存为其他格式，然后在以后使用？
在数据检索时，表单填充，然后清除
如何将此表单保存为以后使用JSON存储序列化数据？
腾讯云开发者
