vuejs2: accessing nested javascript objects inside components

Question

I am building a front end admin form using quasar based on several axios calls to the server to get various aspects of the form. (all of this stuff is put in the data(){} component):

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

This is for laying out the form visually.

Then via another couple calls, I build the list of fields and the attributes of each field, for example

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

In the template, i nest two 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 -->

(that echoes out things like this:)

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

The gist of the problem is I'm trying to find the best way to access nested members of formChildren using the fieldName either in the template or in a method. formChildren[fieldName] works fine. formChildren[fieldName].datatype returns "Cannot read property 'datatype' of undefined", even though echoing out {{ typeof formChildren[fieldName] }} returns "object".

Kinda thinking I just need to rework all of the object building logic but I can't think of a way that avoids some kind of nesting. maybe each fieldName needs its own object? Seems crazy.

N.B.: I'm told by a dialog that similarly titled questions are often downvoted or closed, but this is the most succinct way to title it that I can think of.

acdcjunior · Accepted Answer · 2018-03-04 01:27:40Z

1

Since your data is fetched from the server, it is loaded asynchronously.

When the template first renders, then, the formChildren data is probably not there yet.

When it first renders, {{ typeof formChildren[fieldName] }} returns "undefined", but this first render is overwritten so fast you don't even get to see it.

For the "Cannot read property 'datatype' of undefined" error to appear, though, you just need to request the undefined property once and it will throw an exception, no matter if in just a couple of ms it becomes defined.

Solution: add a v-if so it won't render if not loaded:

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

answered Mar 4, 2018 at 1:27

acdcjunior

136k37 gold badges340 silver badges312 bronze badges

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

Collectives™ on Stack Overflow

vuejs2: accessing nested javascript objects inside components

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