vuejs2：访问组件内的嵌套javascript对象

Question

我正在使用基于对服务器的几个axios调用的quasar构建前端管理表单以获取表单的各个方面。 （所有这些东西都放在data(){}组件中）：

 formDefinition: {
      main_info : [
           field1, field2, field3
      ],
      second_section : [
           field4, field5, field6
      ]
 }

这是用于在视觉上布置表格。

然后通过另外几个调用，我构建了字段列表和每个字段的属性，例如

 formChildren: {
      field1 : {
           datatype:"datetime"
           editable:true
           label:"Archive On"
           required:false
     },
     field2 : {...}
 }

在模板中，我嵌套了两个v-fors：

 <div class="sectionContainer" v-for="(elements, section) in formDefinition">
      <h3>{{section}}</h3>
      <ul>
           <li v-for="(fieldName, index) in elements" :key="index">
               <p>item: {{index}}  :: {{formChildren[fieldName]}} ::  typeof: {{ typeof formChildren[fieldName]}}</p>
 <!-- etc -->

（回应这样的事情:)

 item: 0 :: { "value": "testfilm", "subtype": "slug", "datatype": "string", "editable": true, "min_length": "3", "max_length": "1024", "required": true, "index": "unique", "label": "slug" } :: typeof: object

问题的关键是我试图找到使用模板或方法中的fieldName访问formChildren的嵌套成员的最佳方法。 formChildren[fieldName]工作正常。 formChildren[fieldName].datatype返回“无法读取属性'数据类型'未定义”，即使回显{{ typeof formChildren[fieldName] }}返回“对象”。

有点想我只需要修改所有对象构建逻辑，但我想不出一种避免某种嵌套的方法。也许每个fieldName都需要自己的对象？似乎很疯狂。

N.B。：我通过一个对话告诉我，同样标题的问题往往被低估或关闭，但这是我能想到的最简洁的标题方式。

Answer 1

由于您的数据是从服务器获取的，因此它是异步加载的。

当模板首次渲染时，formChildren数据可能还没有。

当它第一次渲染时，{{ typeof formChildren[fieldName] }}返回"undefined"，但是第一次渲染会被覆盖得太快，你甚至无法看到它。

但是，要显示"Cannot read property 'datatype' of undefined"错误，您只需要请求一次undefined属性，它将抛出异常，无论是在几个ms内它都被定义。

解决方案：添加一个v-if，以便在未加载时不会渲染：

<p v-if="formChildren[fieldName]"> item: {{index}}  :: {{formChildren[fieldName]}} ... </p>