Vue:空对象属性

时间:2018-07-02 14:00:56

标签: javascript rest vuejs2 vue-component

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

<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更新数据?

1 个答案:

答案 0 :(得分:0)

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

必须是:

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

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