title: how can I print out nested object values in an object? VueJs
body: <p>I have some code that I am trying to print out values from an object.
  But there are nested objects that are not printing out correctly and actually displays the entire object as <code>{ propName: value }</code> to the UI.</p>
  
  <p>The code: HTML</p>
  
  <pre><code>&lt;ul class="o-pf-list"&gt;
  
      &lt;li v-for="(value, propName) in integrationSettings" v-if="integrationSettings.propName.active === false" class="o-pf-list__item o-pf-list__item--border o-pf-list__item--line-height"&gt; 
  
          &lt;label&gt; {{ propName }} &lt;/label&gt; 
          &lt;div class="pull-right"&gt; {{ value }} &lt;/div&gt; 
  
          &lt;div v-if="integrationSettings.propName .active === false" class="pull-right"&gt; 
              {{ integrationSettings.propName .active ? 'Active' : 'Disabled' }} 
          &lt;/div&gt;
  
      &lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>In the component vue instance.</p>
  
  <pre><code>data: function() {
          return {
              pageTitle: 'Integration settings',
              objectName: {
                  propName: 'somevalue',
                  propName: 'somevalue',
                  propName: 'somevalue',
                  objectName: {
                      propName: false
                  },
                  propName: 'somevalue',
                  propName: 'somevalue',
                  propName: 'somevalue',
                  objectName: {
                      propName: true
                  },
                  objectName: {
                      propName: false
                  },
                  objectName: {
                      propName: false
                  }
              }
          }
      }
  </code></pre>
  
  <p>Help will be great.Thanks</p>