Is there a way to display nested object values within an object using VueJs?

I am encountering an issue where my code is not printing out values from an object correctly. The nested objects are displaying the entire object as { propName: value } on the UI.

Below is the HTML code:

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

And here is 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
                }
            }
        }
    }

Any help would be greatly appreciated. Thank you!

javascriptvue.js

Answer №1

Would you like it this way?

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

TypeScript maintains the reference and preserves the equality of two objects

Retrieve the last element of an array, make changes to the object that received the value, but inadvertently modify the original last position as well, resulting in both objects being identical. const lunchVisit = plannedVisits[plannedVisits.length ...

javascripttypescriptnestjs

I have implemented a code snippet that verifies if the incoming week aligns with the existing week, triggering an alert accordingly

One of the challenges I faced was checking if a newly created week matched with an existing one, and then displaying an alert. Here's how I approached it: $scope.addWeek = function(type,newWeek,index){ var c = $scope.weekList.length + 1; var ...

javascriptangularjs

When using AngularJS filter, the comparator will evaluate to true and display the ng-repeat list even when the input

Recently, I stumbled upon this interesting example fiddle showcasing the use of a comparator parameter to filter exact matches: http://jsfiddle.net/api/post/library/pure/ The priority is supposed to be a number between 1-100, but due to inputting it as t ...

javascriptangularjs

Can coveralls/codecov be utilized on a local machine?

As per Coveralls public documentation found at , it is stated that "Your code must be hosted on GitHub, BitBucket, or GitLab". Furthermore, the npm package called "coveralls" available at https://www.npmjs.com/package/coveralls mentions that "This script ...

javascriptnode.jsnpmcoverallscodecov

What does the reportProgress function do in HTTP services with JavaScript?

Can someone explain the functionality of reportProgress in JavaScript, specifically when used with Angular Typescript? I am having trouble finding documentation on this. return this.httpClient.request<ProductResponse>('get',`${this.basePath ...

javascriptangulartypescriptapiswagger-codegen

Vue3-compatible UML diagram collections

Looking for suggestions on UML diagram libraries that are compatible with Vue 3. Any recommendations? Thank you! ...

vue.jsvuejs3

ajax fails to send the variables, instead sending undefined values

In my HTML code, I have inputs and checkboxes. The JavaScript code collects the data from the inputs, and through AJAX, it should send the information to PHP where it is received and stored in the session. However, when sending the array to the PHP file v ...

javascriptphpjqueryhtmlajax

Using Jquery to add text at the beginning of a Gmail signature

I am currently working on creating a tool using InboxSDK, which adds text to the end of an email message just before the signature. InboxSDK provides the message body as an HTML Element, and I am experimenting with using Jquery to insert the text. The chal ...

javascriptjqueryhtmlgmail

"How to eliminate the hash symbol from a URL using react-router-dom in a React.js

Recently started learning react.js and running into an issue with the URL structure while using react-router-dom v6 in my project. Specifically, I'm finding a problem with the # symbol in the URL. For instance: {url}/#/dashboard I would like it to b ...

javascriptreactjs

Unable to assign database and user values from .ENV file in connection settings to node-querybuilder

Currently utilizing node-querybuilder for the connection with mysql. Here are the settings to establish the connection: const settings = { host: process.env.HOST_DB, database: process.env.NAME_DB, user: process.env.USER_DB, password: process.env.P ...

javascriptnode.jsexpressmysql-connector

The subscription for the second Observable in RxJS concatMap is triggered individually

I am currently developing an Angular 6 application. I want the app to display a loading animation whenever there is a change in the route or if there are any pending HTTP requests. To achieve this, I have set up two Observables as follows: For httpPendingR ...

javascriptangulartypescriptrxjs

The containerElement is not compatible for routing when using a menuItem in React JS

Greetings, I am fairly new to working with React.js and I am currently exploring how to implement routing using material-ui MenuItem. However, I seem to be encountering some difficulties when trying to utilize the ContainerElement feature upon clicking on ...

javascriptreactjsroutesmaterial-uimenu-items

Tap on the link but remain on the anchor

I'm having a problem with my navbar that uses anchors instead of links. Whenever a user inputs something into the chat and hits enter, they get redirected to the first anchor. I believe I need to implement AJAX to resolve this issue, but I'm stru ...

javascriptphphtmlajaxchat

execute the function whenever the variable undergoes a change

<script> function updateVariable(value){ document.getElementById("demo").innerHTML=value; } </script> Script to update variable on click <?php $numbers=array(0,1,2,3,4,5); $count=sizeof($numbers); echo'<div class="navbox"> ...

phpjavascripthtmlcss

Issue with passing parameter values in MVC Html.ActionLink

Currently, I am experimenting with MVC for a demonstration and have managed to put together some components. However, I am encountering difficulties with an Html.ActionLink. The goal is to display a series of dropdown lists to the user that must be selecte ...

javascriptjqueryasp.net-mvc

download image using React map method

I am trying to transfer an image from one useState variable to another when it is clicked const [photos, setPhotos] = useState([]); useEffect(() => { setPhotos(PhotoArray); }, []); This is the source image that I am using: export const PhotoArr ...

javascripthtmlreactjsevent-handlingstate

Is it possible to modify the font size of all text that shares a particular font size?

Lately, I've been pondering on a question. A few years ago, I created a website using regular CSS and now I want to make some changes to the font sizes. While I know that CSS variables are the recommended solution for this situation, I'm curious ...

javascripthtmljquerycsssass

The simple passport.js sign-up feature is not successful as it mistakenly believes that the username is already in

Currently, I am working on setting up a basic signup feature for my Node + Express + Sequelize application using passport.js. The database is empty at the moment, and I am utilizing the passport-local strategy to extract the user's email and password ...

javascriptnode.jsexpresspassport.jssequelize.js

Is it possible to include two of these on a single page with unique variables? (Using JQuery)

I am looking to create two similar pages, each with different percentages. However, when I try modifying the JS or changing class/ID names, it keeps pulling data from the first SPAN element. http://jsfiddle.net/K62Ra/ <div class="container"> <di ...

javascriptjqueryhtmlcss

When external API validation fails, the JavaScript form is submitted

I am working on implementing form validation using an external email validation API. Below is the form tag I am using: <form class="form-horizontal" role="form" onsubmit="return validateForm()" method="post"> Here is a snippet of my JavaScript co ...

javascriptjqueryformsvalidation