Javascript 如何打印对象中的嵌套对象值？VueJs

我有一些代码，我正试图打印出一个对象的值。 但是，有些嵌套对象打印不正确，实际上将整个对象显示为

{propName:value}

代码：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>

帮助会很好的。谢谢你想这样吗

newvue({
el:“#应用程序”，
模板：“#测试”，
数据：函数（）{
返回{
pageTitle:“集成设置”，
集成设置：{
商品信息：“xxxxxx”，
商品密钥：“xxxxxx”，
SecurityPassphase:'xxxxxx'，
电子邮件确认：{
活动：错误
},
instantTransactionNotification:'xxxxxxxx'，
paymentDataTransfer:'xxxxxxxxxx'，
pdtKey:'xxxx-xxxxxx-xxxxxx-XXXXX'，
重复计费：{
主动：正确
},
重复计费希望：{
活动：错误
},
cellNumberlogins：{
活动：错误
}
}
}
}
});
@导入url（“https://fonts.googleapis.com/css?family=PT+Sans”）；
@字体{
字体系列：PT SAN；
字体大小：正常；
}
身体{
颜色：#000000；
字体大小：12px；
字体系列：PT SAN；
背景色：#F4；
}
.o-pf-container-bg{
背景色：#FFFFFF；
}
.o-pf-container-bg——钯镁{
填充：15px；
边缘底部：20px；
}
.o-pf-container-bg--mg{
边缘底部：20px；
}
.o-pf-list{
z指数：1；
填充：0px；
边际：0px；
列表样式类型：无；
}
.o-pf-列表项目{
填充：3px0px；
}
.o-pf-list___项--图标{
宽度：16px；
高度：16px；
右侧填充：5px；
颜色：#C30017；
}
.o-pf-list___项--icon-q{
宽度：16px；
高度：16px；
线高：0.9；
文本对齐：-webkit中心；
边框：1px实心#4141；
边界半径：50%；
光标：指针；
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
.o-pf-list___项--边框{
垫底：15px；
边缘底部：15px；
边框底部：1px实心#F5；
}
.o-pf-list___项目--行高{
垫底：0px；
边缘底部：0px；
线高：3；
}
.o-pf-list+标签，
.o-pf-list分区{
-webkit-box-flex:1；
弹性：1；
显示：内联表；
单词break：打破一切；
}
.向右拉{
浮子：对！很重要；
}

JS-Bin


{{propName}}
{{value.active？'active'：'Disabled'}
{{value}}


制作一个带有确切问题的现场演示/示例，您提出的问题不清楚。好的，当然可以。下一步。@user2486我已经回答了，请检查并让我知道？@user2486效果很好。谢谢
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
                }
            }
        }
    }