Steps to verify multiple v-for loops and apply style if both are present

Question

Steps to verify multiple v-for loops and apply style if both are present

<div v-for="memberMembershipyear in memberMembershipyears">
  <li v-for="membershipYear in membershipYears"
      :style="membershipYear.num === memberMembershipyear.num ? 'color:green' : color:red'">
         {{membershipYear.membershipType}} {{membershipYear.yr}}
  </li>
</div>

My current implementation is not producing the desired results. The output consists mostly of red-colored items, with a few green ones interspersed. Additionally, there is excessive repetition in the display. I attempted to use v-once to address this issue, but it was unsuccessful.

 Membership of club 2001
Membership of club 2002
Membership of club 2003

...

I am seeking a solution to display all memberships, highlighting only those that belong to the current member with a green color. All other memberships should be displayed in red.

javascript vue.js styles v-for

Answer 1

Answer №1


<div v-for="userMembershipYear in userMembershipYears">
  <li v-for="mShipYear in membershipYears"
      :style="mShipYear.num === userMembershipYear.num ? 'color:green' : 'color:red'">
         {{mShipYear.membershipType}} {{mShipYear.year}}
  </li>
</div>

Could you attempt it in this manner instead?

Answer 2


<div v-for="userMembershipYear in userMembershipYears">
  <li v-for="mShipYear in membershipYears"
      :style="mShipYear.num === userMembershipYear.num ? 'color:green' : 'color:red'">
         {{mShipYear.membershipType}} {{mShipYear.year}}
  </li>
</div>

Could you attempt it in this manner instead?

Steps to verify multiple v-for loops and apply style if both are present

Answer №1

Similar questions

Cloud function -> time stamps evaluation

Revolutionary scroll-based navigation fill transition

Request for removal in Express.js

Experiencing issues with autoungrabify or autolock in cytoscape.js?

Using nightwatch.js to verify elements across different parts of a webpage

What is the process for importing a JSON5 file in Typescript, just like you would with a regular JSON file?

Is there a way to include e.preventDefault() within an ajax call?

Why does the 401 error continue to persist while attempting to log in using Google Identity service on my Laravel application?

Trouble accessing data with VueJS 3 axios

Explore the category options in the reference document using Node.js

Create an interface that inherits from another in MUI

Using JavaScript functions to modify the style of the DOM

Load an XML file from the local server asynchronously on the Chrome web browser

Is it possible to use the OR operator in Mongoose (MongoDB) queries?

Looking for the temporary folder created by the nodejs filesystem?

Creating an interactive date selection feature with a calendar icon in MVC 5

Navigate to the second level array within the JSON data structure

Adjustable dimensions for a collection of squares based on screen size

What is the best way to compare dates in order to obtain the necessary results?

An issue has arisen when trying to fetch and parse data using React and JavaScript