Question

我有一个组件，可以通过一种方法将数据传递给该组件：

<div class="component-form" v-if="component">
    <render-component class="component-form__render-view"></render-component>
    <form-sidebar
      class="component-form__sidebar"
      :component="formatData()"
    >
    </form-sidebar>
</div>

这是所说的方法（位于methods中）：

formatData: function () {
  const componentObject = {
    ID: this.component.ID,
    Title: this.component.Title,
    Groups: []
  }

  for (let object in this.component.ParametersSpec) {
    let actualObject = this.component.ParametersSpec[object]
    actualObject.Title = object

    if (!componentObject.Groups[actualObject.group]) {
      componentObject.Groups[actualObject.group] = []
    }

    componentObject.Groups[actualObject.group].push(actualObject)
    console.log(componentObject)
  }

  return componentObject
}

FormatData取决于API请求：

mounted () {
api.components(routes.COMPONENT_API_URL).getOne({id: this.id})
  .then(response => { this.component = response.data })
},

然后在这个form-sidebar组件中，我只有一个简单的{{ component }}来显示内容。输出为：

{ "ID": "service-pit", "Title": "Service Pit", "Groups": [] }

但是，Groups是空的，它不应该是空的，并且肯定不在控制台中。现在，我知道这是在正确返回数据之前传递数据的常见症状。由于控制台在我打开它之前还说组是空的（然后它会重新检查内容，发现不是）。

但是，如果请求尚未完成，那么它如何正确显示ID和Title？请求完成后，如何使Vue更新数据？

Answer 1

const componentObject = {
    ID: this.component.ID,
    Title: this.component.Title,
    Groups: []
  }

必须是：

const componentObject = {
    ID: this.component.ID,
    Title: this.component.Title,
    Groups: {}
  }

对于这么小的问题，这花费了太长时间。

Vue：空对象属性

1 个答案: