如果道具为空，则父母道具不能被孩子观看

Question

目前正在为 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 属性，在本例中为它的“标题”字段。

// 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})
}

---

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

如果它的对象是空的，$parent.value 是不可见的。 （没有触发）如果它从状态返回对象，它工作得很好。

afaik，$set 使对象自动响应；这就是我在“FormView”中用来设置数据的东西。 数据已成功设置，但 $watch 未触发任何操作。

我错过了什么？

Answer 1

• 使用 $data 对象作为新对象
• 使用 $set 设置表单中的每个键

它解决了反应性问题。