Vue.js 如果道具为空，则子道具无法查看父道具

当前正在为json数组生成的表单构建组件集，对象类似于下面的内容。我需要监视父值对象，以便填充其他字段并将其相互连接

{
  id: 'title',
  label: 'Title',
  type: 'text',
  placement: 'main',
  placeholder: 'Write Something...'
},
{
  id: 'slug',
  label: 'Slug',
  type: 'slug',
  placement: 'seo',
  populateFrom: 'title',
  gridSize: 6
}

组件有一个层次结构，让父级（或祖辈）知道字段值作为表单模型

FormView
  Field
    FieldText
  Field
    FieldSlug

由FieldSlug检查的populateFrom属性，用于填充所选模型属性（在本例中为其“标题”字段）中的数据

---

对于编辑和创建表单，我使用相同的视图（组件）。从Vuex获取并由getter筛选的数据。在其创建模式下，getter无法从状态中找到任何对象，并返回空对象

如果其对象为空，$parent.value无法监视。（未触发任何内容）如果它从状态返回对象，则它工作得非常好

好的，$set会使对象自动反应；这就是我在“FormView”中用来设置数据的内容成功设置数据，但$watch未触发任何操作

我错过了什么？

• 将$data对象用作新的
• 使用$set设置窗体中的每个键

它解决了反应性问题

// this.field is field definition object sampled above
// $emit('input') notifies FormView to change value for form

if (this.field.populateFrom) {
  this.populateFrom = this.$parent.$watch('value', (after, before) => {
    this.$emit('input', slug(after[this.field.populateFrom]))
  }, {deep: true})
}