CODEWITHSUNDEEP
javascriptvue.js
CrisA
CrisA

Reputation: 45

how can I print out nested object values in an object? VueJs

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 { propName: value } to the UI.

The code: HTML

<ul class="o-pf-list">

    <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"> 

        <label> {{ propName }} </label> 
        <div class="pull-right"> {{ value }} </div> 

        <div v-if="integrationSettings.propName .active === false" class="pull-right"> 
            {{ integrationSettings.propName .active ? 'Active' : 'Disabled' }} 
        </div>

    </li>

</ul>

In the component vue instance.

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
                }
            }
        }
    }

Help will be great.Thanks

Upvotes: 0

Views: 5054

Answers (1)

Niklesh Raut
Niklesh Raut

Reputation: 34914

Do you want like this

new Vue ({
  el: '#app',
  template: '#test',
  data: function() {
            return {
                pageTitle: 'Integration settings',
                integrationSettings: {
                    merchantId: 'xxxxxx',
                    merchantKey: 'xxxxxx',
                    securityPassphrase: 'xxxxxx',
                    emailConfirmation: {
                        active: false
                    },
                    instantTransactionNotification: 'xxxxxxxx',
                    paymentDataTransfer: 'xxxxxxxxxxx',
                    pdtKey: 'xxxx-xxxxxx-xxxxxx-xxxx',
                    recurringBilling: {
                        active: true
                    },
                    recurringBillingShopify: {
                        active: false
                    },
                    cellNumberlogins: {
                        active: false
                    }
                }
            }
        }
});
@import url("https://fonts.googleapis.com/css?family=PT+Sans");

@font-face {
  font-family: PT Sans;
  font-weight: normal;
}

body {
  color: #000000;
  font-size: 12px;
  font-family: PT Sans;
  background-color: #F4F4F4;
}

.o-pf-container-bg {
  background-color: #FFFFFF;
}

.o-pf-container-bg--pd-mg {
  padding: 15px;
  margin-bottom: 20px;
}

.o-pf-container-bg--mg {
  margin-bottom: 20px;
}


.o-pf-list {
  z-index: 1;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.o-pf-list__item {
  padding: 3px 0px;
}

.o-pf-list__item--icon {
  width: 16px;
  height: 16px;
  padding-right: 5px;
  color: #C30017;
}

.o-pf-list__item--icon-q {
  width: 16px;
  height: 16px;
  line-height: 0.9;
  text-align: -webkit-center;
  border: 1px solid #414141;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.o-pf-list__item--border {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #F5F5F5;
}

.o-pf-list__item--line-height {
  padding-bottom: 0px;
  margin-bottom: 0px;
  line-height: 3;
}



.o-pf-list + label,
.o-pf-list div {
  -webkit-box-flex: 1;
  flex: 1;
  display: inline-table;
  word-break: break-all;
}

.pull-right {
  float: right !important;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  
  <title>JS Bin</title>
</head>
<body>

  <div id="app">
    
  </div>
  
  <template id="test">
    
    <div>
      
      <div class="o-pf-container-bg o-pf-container-bg--pd-mg">

            <ul class="o-pf-list">

                <li v-for="(value, propName) in integrationSettings" v-if="integrationSettings.recurringBillingShopify.active === false" class="o-pf-list__item o-pf-list__item--border o-pf-list__item--line-height"> 
                    
                    <label> {{ propName }} </label> 
                    <div v-if="typeof value === 'object'" class="pull-right"> {{ value.active ? 'Active':'Disabled' }} </div> 
                    <div v-else="typeof value === 'object'" class="pull-right"> {{ value }} </div> 
                    
                    <!--<div v-if="integrationSettings.recurringBillingShopify.active === false" class="pull-right"> 
                        {{ integrationSettings.recurringBillingShopify.active ? 'Active' : 'Disabled' }} 
                    </div>-->
                    
                </li>
                
            </ul>
                
        </div>
      
    </div>
    
  </template>
  
</body>
</html>

Upvotes: 1

Related Questions