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

Question

我正在使用 quasar 基于对服务器的几次 axios 调用来构建前端管理表单，以获取表单的各个方面。 (所有这些内容都放在 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-for:

 <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 返回“无法读取未定义的属性‘datatype’”，即使回显 {{ typeof formChildren[fieldName] }} 返回“object”。

有点想我只需要重新设计所有的对象构建逻辑，但我想不出一种方法来避免某种类型的嵌套。也许每个 fieldName 都需要自己的对象？看起来很疯狂。

注意:对话告诉我，类似标题的问题通常会被否决或关闭，但这是我能想到的最简洁的标题方式。

Answer 1

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

当模板第一次呈现时，formChildren 数据可能还不存在。

当它第一次渲染时，{{ typeof formChildren[fieldName] }} 返回"undefined"，但是第一次渲染被覆盖得如此之快，你甚至没有得到来看看它。

对于出现“无法读取未定义的属性'数据类型'”错误，您只需要请求一次未定义的属性，它就会抛出异常，无论是否只是一个几毫秒后它就被定义了。

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

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