我有一个组件,可以通过一种方法将数据传递给该组件:
<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更新数据?
答案 0 :(得分:0)
const componentObject = {
ID: this.component.ID,
Title: this.component.Title,
Groups: []
}
必须是:
const componentObject = {
ID: this.component.ID,
Title: this.component.Title,
Groups: {}
}
对于这么小的问题,这花费了太长时间。