Vue: Empty object property

Question

I have a component to which I pass data to via a method:

<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>

This is said method (located in, well, 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 is dependent on an API request:

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

Then in this form-sidebar component, I just have a simple {{ component }} to display the contents. The following is the output:

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

But, Groups is empty, which it shouldn't be, and certainly isn't in the console. Now I know this is a common symptom of passing data before it is properly returned. Since the console also says groups is empty before I open it (then it rechecks the contents and finds out it isn't).

But if the request wasn't finished yet, then how did it display the ID and Title correctly? And how can I make Vue update the data when the request is done?

vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats - check this — Aldarund
– Aldarund, Commented Jul 2, 2018 at 15:23

Snackoverflow · Accepted Answer · 2018-07-03 07:14:06Z

1

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

had to be:

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

This took way too long for such a small problem..

answered Jul 3, 2018 at 7:14

Snackoverflow

8481 gold badge12 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue: Empty object property

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related