Passing a variable into a get function in order to set dynamic CSS

Question

I would like to have a dynamic CSS where the font color get red if the data exist;

I am using a loop function in my HTML in the following way:

<template if:true={fulldata}>   
          <template for:each = {fulldata} for:item = "item" for:index="indexVar">

               <tr key={item.key} class="slds-hint-parent">
                     <td  class="slds-size_4-of-12" data-label="Prospecting" scope="row">
                            <div class="lineReturn" title={item.name}>               
                                 <div>{item.name}</div>          
                            </div>
                     </td>
                     <td  class="slds-size_3-of-12" data-label="Prospecting" scope="row">
                             <div class="lineReturn" title={item.Value}>
                                  <lightning-formatted-number value={item.Value} maximum-fraction-digits="0"></lightning-formatted-number>
                                                  
                             </div>
                     </td>
                     <td  class="slds-size_1-of-12" data-label="Prospecting" scope="row">
                        <div class="lineReturn" title={item.coeff}>      
                             <template if:false={isEdited}>
                                <div class={changedData_css}>{item.coeff}</div>                                                    
                              </template>
                              <template if:true={isEdited}>
                                <lightning-input type="number" key={item.coeff} data-id={item.coeff} name={item.fields} label="Name" variant="label-hidden" onchange={handleChange} disabled={item.disabled}></lightning-input>
                                                
                               </template> 
                        </div>           
                     </td>
                 </tr>
         </template>
 </template> 

I would like to check with the changeddata_css if recordData[item.name] exist then return RedFont which is the name of my css class.

how can I pass a parameter into a get fonction ? such as

get changedData_css(item.name){
   if(this.recordData.item.name){
        return 'redFont'
    }
     
  }

thxc you

Answer 1

You cannot. A better approach would be to have a new attribute on the item level where you will calculate the css style, and then use this in your html definition.

So in your js where you are getting the fullData list, iterate it and calculate new attribute item.cssStyle with the function you have, without the get statement. And then in the html just use the item.cssStyle value.

Answer 2

LWC expressions do not support anything but property access so you cannot pass any parameters to functions. Of course, you can always have properties on your objects that represent the end goal of your logic, and these can be either:

• a normal property that you pre-populate with the desired value. Here, for example, when you get the recordData, you can iterate the items and add a property, as suggested by @Damecek, that holds the pre-computed CSS style
• a virtual property where the getter for the property performs the computation on demand and returns the required CSS style.