Vue: пустое свойство объекта - PullRequest
Новая
       7

Vue: пустое свойство объекта

0 голосов
/ 02 июля 2018

У меня есть компонент, которому я передаю данные с помощью метода: 

<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": [] }

Но, Группы пустые, чего не должно быть, и, конечно, нет в консоли. Теперь я знаю, что это распространенный признак передачи данных, прежде чем они будут правильно возвращены. Поскольку консоль также сообщает, что группы пустые, прежде чем я ее открою (тогда она перепроверяет содержимое и обнаруживает, что это не так).

Но если запрос еще не завершен, то как он правильно отображал идентификатор и заголовок? И как я могу заставить Vue обновить данные после выполнения запроса?

1 Ответ

0 голосов
/ 03 июля 2018 
const componentObject = {
    ID: this.component.ID,
    Title: this.component.Title,
    Groups: []
  }

должно быть: 

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

Это заняло слишком много времени для такой маленькой проблемы ..

...